React SSR原理
date
Mar 11, 2021
slug
next-for-vercel
status
Published
tags
Website
summary
React SSR
type
Post
React SSR原理
React SSR（Server Side Rendering）是指在服务器端渲染React组件，然后将渲染后的HTML字符串发送给浏览器，浏览器再通过hydrate方法将HTML转化为React组件。这样做的好处是可以提高首屏加载速度，优化用户体验，以及有利于SEO（搜索引擎优化）。
SSR的流程
SSR的流程大致如下：
- 浏览器向服务器发送请求，请求某个路由的页面。
- 服务器根据路由匹配对应的React组件，并调用ReactDOMServer.renderToString方法将其渲染为HTML字符串。
- 服务器将HTML字符串拼接为完整的HTML文档，并添加一些必要的脚本标签，如引入React和ReactDOM等库，以及引入客户端打包后的JS文件。
- 服务器将HTML文档作为响应返回给浏览器。
- 浏览器接收到响应后，解析并显示HTML内容。
- 浏览器执行脚本标签中的代码，加载React和ReactDOM等库，以及客户端打包后的JS文件。
- 客户端打包后的JS文件中包含了与服务器端相同的路由配置和组件代码，因此可以根据当前路由找到对应的组件，并调用ReactDOM.hydrate方法将其与已有的HTML内容关联起来。这样就完成了从服务端渲染到客户端渲染的过渡。
SSR的难点
SSR虽然有很多优点，但也有一些难点需要解决：
- 数据获取：在服务端渲染时，需要提前获取到组件所需的数据，并传递给组件。而在客户端渲染时，通常是在组件挂载或更新时才发起数据请求。因此，需要一种机制来统一服务端和客户端的数据获取方式，并避免重复请求数据。
- 路由匹配：在服务端渲染时，需要根据请求路径匹配对应的组件，并返回正确的状态码。而在客户端渲染时，通常是使用前端路由库（如react-router）来实现路由跳转和组件切换。因此，需要一种机制来同步服务端和客户端的路由配置，并处理好重定向和404等情况。
- 代码分割：在客户端渲染时，通常会使用代码分割（code splitting）技术来按需加载JS文件，以减少首屏加载时间和节省带宽。而在服务端渲染时，需要知道哪些JS文件是当前页面所需的，并将其添加到脚本标签中。因此，需要一种机制来识别并提取出当前页面所需的JS文件。