解决了什么问题

• 优化 SPA 首屏渲染
• 优化 SPA SEO 的问题

流程

实现

同构

• 路由同构：双端使用同一套路由规则，node server 通过 req url path 进行组件的查找，得到需要渲染的组件。关键代码

    // 路径匹配
    import { matchRoutes } from "react-router-config";
  
    //查找组件
    const branch =  matchRoutes(routes,url);
  
    //得到组件
    const Component = branch[0].route.component;
  
    //将组件渲染为 html 字符串
    const html = renderToString(<Component data={data}/>);
  
    res.end(html);
  

• 数据同构：node server 获取到组件后，调用组件的静态方法获取数据

    //数据预取
    const data = Component.getInitialProps(branch[0].match.params);
  
    //传入数据，渲染组件为 html 字符串
    const html = renderToString(<Component data={data}/>);
  
    //数据注水
    const propsData = `<textarea style="display:none" id="krs-server-render-data-BOX">${JSON.stringify(data)}</textarea>`;
  

• 渲染同构：服务端和浏览器端，首屏 html 和数据必须两者一致，否则会出现闪烁。服务端已经通过 renderToString 拿到组件 html，通过组件静态方法拿到初始数据，只差把数据传给浏览器端这一步。通过服务器端注水，浏览器端脱水，可实现数据同步，ReactDOM.hydrate 比对渲染差异，加载事件处理，完成 SPA 构建。

细节

• 服务端转化组件 html 时，添加对 css 的过滤
• TDK 个性化支持
• 服务端对 window 对象的使用（fake window）
• 动态路由？

一文吃透 React SSR 服务端渲染和同构原理

React SSR重构踩坑记录