React实现SSR及注意事项

一、SSR 中客户端渲染与服务器端渲染路由代码的差异

1.路由差别

服务端路由 需要 把 location（当前请求路径）传递给 StaticRouter 组件 ， StaticRouter 根据路径分析出当前所需要的组件(PS：StaticRouter 是 React-Router 针对服务器端渲染专门提供的一个路由组件)
客户端路由 通过 BrowserRouter 能够匹配到浏览器即将显示的路由组件， 浏览器环境 下需要把组件转化成 DOM ，并使用 ReactDom.render 方法来 进行 DOM 的挂载
服务端路由 通过 StaticRouter 能够在服务器端匹配到将要显示的组件， 服务器环境 下需要把组件转化成 字符串 ，因此需要调用 ReactDom.renderToString 方法得到 App 组件对应的 HTML 字符串

客户端路由

javascript 复制代码

  const App = () => {
  return (
    <Provider store={store}>
      <BrowserRouter>
        <div>
          <Route path='/' component={Home}>
        </div>
      </BrowserRouter>
    </Provider>
  )
}

ReactDom.render(<App/>, document.querySelector('#root'))

服务端路由

javascript 复制代码

const App = () => {
  return 
    <Provider store={store}>
      <StaticRouter location={req.path} context={context}>
        <div>
          <Route path='/' component={Home}>
        </div>
      </StaticRouter>
    </Provider>
}

Return ReactDom.renderToString(<App/>)

2.代码打包差异

服务器端渲染的代码和客户端的代码的 入口路由 代码有差异，因此在 Webpack 中，Entry 的配置上并不相同
target：node-> 在服务器端运行的代码，有时需要 引入 Node 中的核心模块 ，需要 Webpack 打包时能够识别出核心模块，不将核心模块的代码合并到最终生成的代码中
webpack-node-externals→服务端渲染的代码，如果 引用了第三方模块 ，Node环境下已经安装了这些包，因此不需要额外打包到代码里，直接引用即可

CSS样式引用 的问题：

服务端代码打包配置 时使用 isomorphic-style-loader ，其处理 CSS 的时候只会在 对应的 DOM 元素上生成 class 类名 ，然后返回 生成的 CSS 样式代码
客户端代码打包配置 时，使用 css-loader 和 style-loader ， css-loader 会在 DOM 上生成 class 类名 并 解析好CSS 代码 ，而后通过 style-loader 把代码挂载 到页面上
存在问题 ：页面上的样式实际最终由客户端渲染时添加，因此页面可能会最开始没有样式。我们可以在服务器端渲染时，获取 isomorphic-style-loader 返回的样式代码 ，并以 字符串 的形式添加到 服务端渲染的 HTML 之中

客户端Webpack配置

yaml 复制代码

{
  entry: './src/client/index.js',
  output: {
    filename: 'index.js',
    path: path.resolve(__dirname, 'public')
  },
  module: {
    rules: [{
      test: /.js?$/,
      loader: 'babel-loader'
    },{
      test: /.css?$/,
      use: ['style-loader', {
        loader: 'css-loader',
        options: {modules: true}
      }]
    },{
      test: /.(png|jpeg|jpg|gif|svg)?$/,
      loader: 'url-loader',
      options: {
        limit: 8000,
        publicPath: '/'
      }
    }]
  }
}

服务端Webpack配置

yaml 复制代码

{
  target: 'node',
  entry: './src/server/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'build')
  },
  externals: [nodeExternals()],
  module: {
    rules: [{
      test: /.js?$/,
      loader: 'babel-loader'
    },{
      test: /.css?$/,
      use: ['isomorphic-style-loader', {
        loader: 'css-loader',
        options: {modules: true}
      }]
    },{
      test: /.(png|jpeg|jpg|gif|svg)?$/,
      loader: 'url-loader',
      options: {
        limit: 8000,
        outputPath: '../public/',
        publicPath: '/'
      }
    }]
  }
};

3.可操作对象差异

服务端环境无法操作浏览器对象：DOM、BOM等；

二、服务端渲染的一点注意事项

不要在函数式组件的函数顶层作用域以及类组件的render访问BOM DOM对象、不要绑定事件，要用也要判断环境但是不建议
浏览器特点对象 API 事件绑定需要再函数式组件useEffect或者类组件compontenWillMount以后得生命周期中访问，其以后得生命周期不会再node端执行，useLayoutEffect在服务端会报错确实需要使用的可在node端useEffect，浏览器端使用useLayoutEffect（参照ahooks的useIsomorphicLayoutEffect封装）
要再ssr node端执行的代码中使用任何定时器、MutationObserver\IntersectionObserver等Observer API 上述行为服务端渲染node侧内存泄漏高发场景

参考文献：

React 中同构（SSR）原理脉络梳理