SSR

SSR(Server side render) 服务端渲染

优势

1. SEO
2. 更快的首屏直出解决方案

详细的说明可以参考：vue ssr指南

实现

1. react 中提供的renderToString、renderToStaticMarkup来把组件渲染成html字符串。
2. 在你的组件中添加静态方法 getInitialProps 来方便服务端渲染和客户端获取数据，设置成静态方法是为了在服务端渲染的时候使用相同的方法，始兴县同构应用复用代码。

export default class YourPageComponent {
  static async getInitialProps() {
    let data;
    const res = await request.get("/api/getData");
    if (!res.errCode) data = res.data;
    return {
      data
    };
  }
  // other logic
  ...
}

2. 使用renderToString方法获取到组件的html字符串

const data  = await YourPageComponent.getInitialProps();
renderToString(
  React.createElement(YourPageComponent, {
    // props here
    ssrData: data
  })
)

3. 将得到的组件 html片段 插入到模板中，同时把服务端渲染获取到的数据data赋值给windiw.__initData__供客户端渲染使用。

indexHtml = indexHtml.replace(
  "/*getInitialProps*/",
  `window.__initData__=${JSON.stringify(data)};window.ssrPath='${ctx.path}'`
);

大概流程如上，完整demo

参考

1. egg-react-ssr
2. next.js
3. beidou
4. 简单版本
5. easywebpack