做 react SSR 有一段时间了, 正好在这里分享一下.
什么是服务端渲染
用户第一次请求/刷新页面时, 由服务端响应. 服务器响应的是一个已经插入了组件文本的模板 ( template with pre-populated components ). 由于响应的页面已经有组件的 HTML 文本, 可以省去浏览器端首次渲染的工作, 加快首屏显示速度, SEO 友好.
服务端渲染时浏览器的工作流程
浏览器接收到服务器预渲染的模板后, 渲染 DOM, 然后开始下载 js 文件(bundle), 下载完成后 react 开始工作, 生成VDOM. 由于使用了 SSR hydrate() API, VDOM 上组件的 mount 行为 (也就是组件从 VDOM 到 真实 DOM 的第一次的 render) 将会被跳过. Mobx/Redux 和 React Router 开始工作.
余后的页面内的链接 ( <Link> ) 跳转皆由 react router 接管.
服务端渲染时的工程架构
服务端渲染时, 服务器和浏览器共用一套模板, 一套组件.
两个入口文件 (两个 bundle).
服务器需要一个 服务端 bundle, 对应的 webpack 编译配置需要适配服务端环境 (nodejs commonjs 模块系统).
开发环境下的服务端渲染工作可以和 webpack devServer 协作, 实现开发时服务端渲染的热加载.
流程
服务器响应
在客户端入口组件应用 ReactDOM.hydrate() 替换 ReactDOM.render()
在服务端使用 ReactDOMServer.renderToString() 将组件转化为字符串, 插入模板中, 响应给客户端.
实现首次加载时数据同步
- Mobx 的服务端渲染配置: 参考官方文档.
- 前后端数据传递: 通过脚本注入的方法向模板插入一个 js 对象, 以此传递数据给浏览器, 实现 VDOM 和 DOM 上组件/元素的数据同步.
window.__INITIAL_STATE__ = <%%-initialState %>
服务端 React Router 设置
服务端需要使用 React Router <StaticRouter> 组件.
- 通过 <StaticRouter> 上 location 自动实现对 <Route> 的匹配 (响应).
- 通过 <StaticRouter> 上的 context 属性手动实现对 <Redirect> 的响应. 参考 React Router 官方文档.
前端路由的数据获取
定义接口: 可以在 routes 文件内定义用于获取数据的 API, 也可以在组件内部提供静态方法来获取数据的 API.
调用接口: 在组件的生命周期函数中调用这些 API.
针对 SEO 搜索引擎爬虫的配置.
动态渲染 <head>
以上, 代码细节还是比较多的. 使用了 Material-UI 的话也需要做相关的配置.
示例代码参考:
这个 repo 是一个 React + React Router 4 SSR 的 React & React Router 4 Server Side Rendering Boilerplate
