什么是服务器端渲染 (SSR)
服务器端渲染 (Server-side Rendering, SSR) 是指在服务端将 React 组件渲染成 HTML 字符串后再传输给客户端。即，将 React 组件在服务端预处理并生成 HTML，然后传回浏览器，最终展示在用户面前。这个过程与传统的 SPA (Single Page Application) 相反，SPA 通常是通过浏览器请求数据并利用 JS 生成 DOM，即前端渲染（Client-side Rendering, CSR）。
但是，前端渲染会导致首屏加载慢、SEO 难度大等问题，而服务器端渲染可以优化这些问题，并提供更好的用户体验。
React SSR 的实现
React SSR 的实现需要考虑以下几个方面：
- 路由处理（服务端和客户端有不同的路由，如何处理）
- 数据请求（如何通过服务端发送请求获取数据）
- 渲染问题（如何在服务端渲染 React）
路由处理
首先需要注意的是，服务端和客户端的路由可能会有差异，如处理动态路由参数等。所以我们需要在服务端也同样配置路由表，并在服务器端将路由信息打包并在客户端解包。
使用 react-router-config 可以在服务端的 react 组件中使用路由配置信息，并将其打包发送给客户端，具体实现可以参考 react-router-config 官方文档。
数据请求
在 SSR 中，由于首屏需要完美展示，因此需要服务端在渲染 html 前提前将请求得到的数据注入到 html 中。这一步在 CSR 中在 JS 中发出请求，在DOMContentLoaded生命周期中修改DOM元素，因此在 SSR 中我们需要在前端渲染之前就将数据请求到。
在服务端完成数据请求，我们需要将获取的数据通过 redux 或其他状态管理库注入到我们的应用中，以免在传输中丢失。同时，使用Redux或类似工具将数据储到应用内存之后，便可以在服务端渲染前将该状态通过一个字符串表示传递给HTML文件。
-- -------------------- ---- -------
----- -------------- - ----------------
----- ---- - ---------------
--------- --------------
------- ------------------ ------------------
---- --
---------
-----------
-
----------------------------- ----------------
-------- -------------------- --------------- -
------ -
--------- -----
------
------
------------ -----------
------- ---------------- ---------------
---------------------------------- - -----------------------------------------
-----
---------
-----------
-------
------
---- -----------------------
-------
-------
-
-渲染问题
在 SSR 中，因为不是在浏览器中运行，所以我们需要在 Node 环境中模拟出浏览器环境。其中 React 16 及更高版本提供了一个 ReactDOMServer.renderToString() 方法，可将 React 组件转化为静态 html 字符串。React 还提供了 ReactDOMServer.renderToStaticMarkup() 方法，这个方法与 runToStaticMarkup() 方法作用相同，只不过这种方法会剥离 React 组件的事件处理，能编构 render 函数中的内容更少。
-- -------------------- ---- -------
------ -------------- ---- ------------------
------ - ------------ - ---- ------------------
----- --- - ---------
---------------------------------
------------ ----- ---- -- -
----- ------- - --
----- --- - -
------------- ----------------- -------------------
---- --
---------------
-
----- ----------- - ----------------------------------
-- ------------- -
-- --------- - ------------ --- --------
------ ----------------- ------------
-
---------------------------------------------
--
-------- ----------------------- -
------ -
--------- -----
------
------
------------ ------ -----------------
-------
------
---- ------------------------------
------- -------------------------
-------
-------
-
-SSR 实践总结
React 的 SSR 实践，不仅需要考虑路由、数据请求和渲染问题，同时还需要注意一些其他问题，如服务端渲染的性能问题、SEO 策略等。
对于性能问题，我们需要注意的是代码和资源大小，对于服务端渲染，代码和资源的大小对性能影响较大。因此我们需要在样式处理和代码分割等方面多加优化。
对于 SEO 策略，我们需要注意的是，将 React 组件转换为静态 html 就可以被所有搜索引擎爬取，从而更好的 SEO。另外，我们需要添加 title、meta 等 SEO 相关标签。
总体来说，SSR 可以帮助我们解决 SPA 的一些问题，提供更好的用户体验和 SEO 策略，同时也需要综合考虑性能等问题，才能发挥其优势。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6464ec45968c7c53b05c3b97