前言
在现代 Web 开发中，前后端分离已经成为了一个非常流行的开发方式。前端需要向后端请求数据，以便渲染页面。然而，SPA（Single-Page Application）的出现让前端也能够不依赖后端进行渲染。而 SSR（Server-Side Rendering）技术则为了提高首次加载速度，解决 SEO 问题而生。
React 是一个非常受欢迎的前端框架，很多公司采用了 React 进行开发。而对于 React 项目来说，使用 SSR 技术就能够提高首次加载速度和 SEO，因此 React SSR 是很多项目所追求的目标。
在 React SSR 中，服务端需要提供数据给前端进行渲染。在这个过程中，如果能够尽可能地减少数据交互次数，就能够提高渲染速度。即在服务端将数据取出，一起打包返回给前端。这也就需要用到本文所介绍的 npm 包 react-data-ssr-server。
什么是 react-data-ssr-server
react-data-ssr-server 是一个能够在服务端将数据预先注入到 HTML 中，并在客户端启动 React 项目时从 HTML 中提取数据的 npm 包。
使用 react-data-ssr-server 可以减少客户端向服务器请求数据的次数，提高数据传输效率。
安装
首先，我们需要在 React 项目中安装 react-data-ssr-server：
npm install react-data-ssr-server
安装完成后，我们需要对 React 项目进行一些配置。
配置
服务端配置
在服务端，我们需要先将 react-data-ssr-server 包导入到我们的代码中：
const { renderToStringWithData } = require('react-data-ssr-server')接下来，在渲染 React 组件时，我们需要将数据注入到 HTML 中，代码如下：
-- -------------------- ---- -------
--------------- ----- ----- ---- -- -
----- ------- - --
----- ---- - ----- ------------------
----- - ----- -------------------- - - ----- -----------------------
------------- ------------------ ------------------
---- ----------- --
---------------
-
---------
----------------
-----
--------------------
--
-
--其中，fetchData 方法可以从数据库或者文件系统中获取数据。注意，renderToStringWithData 方法的参数需要使用一个带有 data 属性的 React 组件，我们可以将数据作为该属性传递给组件。
除此之外，我们还需要在 html 中添加 data-react-data-ssr 字段，这个字段是为了让 react-data-ssr-server 能够正常解析数据。代码如下：
-- -------------------- ---- -------
----- -------------- - -- ----- -------------------- -- -- -
------ -
--------- -----
------
------
----- ----------------
------------ --- ------------
-------
------
---- -----------------------
--
-------------------- --
--------------------------- - - --
------------------------ - -----------------------------
---
--------------
-
------- ---------------------------
-------
-------
-
-客户端配置
在客户端，我们需要将数据从 HTML 中提取出来，并在启动 React 项目时传递给根组件。
首先，我们需要在根组件中定义一个名为 initialState 的 state，这个 state 会在组件初始化时自动被赋值为 window.DATA。
-- -------------------- ---- -------
----- --- ------- --------------- -
------------------ -
------------
---------- - -
------------- ------------------ -- --
-
-
-------- -
------ -
-----
---------- -----------
------
-
-
-接下来，在客户端中，我们需要将数据提取出来并传递给根组件。代码如下：
-- -------------------- ---- -------
----- ------------ - --------------- -- --
------ ---------------
--------
---------------
---- --------------------------- --
-----------------
-------------------------------
-总结
通过使用 react-data-ssr-server，我们可以在服务端将数据预先注入到 HTML 中，并在客户端启动 React 项目时从 HTML 中提取数据。这样可以减少客户端向服务器请求数据的次数，提高数据传输效率，改善 React SSR 项目的性能。
在具体实现中，我们需要进行一些服务端和客户端的配置。服务端需要使用 renderToStringWithData 方法将数据注入到 HTML 中，客户端需要使用 initialState 变量从 HTML 中提取数据。
示例代码
以下是 react-data-ssr-server 的完整示例代码：
-- -------------------- ---- -------
----- ------- - ------------------
----- ---- - ---------------
----- ----- - ----------------
----- - -------------- - - ---------------------------
----- - --------------- - - ----------------------------
----- - ------------- ------ ------ - - -----------------------
----- - ---------------------- - - --------------------------------
----- - -------------- - - ------------------------------
----- - -------- - - ---------------------------
----- - ------------- ------------- - - -----------------------
----- ------ - --- --------------
----- --- ----------
---- --------------------------------
------------ -------------
---
------ --- ---------------
--
----- --------- - ----- --- -- -
----- ------ - ----- --------------
------ ----
-
---------- -
------- -
--
----
-----
-
-
-
-
--
------ -----------
-
----- -------------- - -- ----- -------------------- -- -- -
------ -
--------- -----
------
------
----- ----------------
------------ --- ------------
-------
------
---- -----------------------
--
-------------------- --
--------------------------- - - --
------------------------ - -----------------------------
---
--------------
-
------- ---------------------------
-------
-------
-
-
----- --- - ----- -- -
----- - ---- - - -----
----- ------------ -------------- - ------------
------------ -- -
--------------------------------------
-- ------------------
------ -
-----
---------- -----------
----
------------------------- -- -
--- -------------------
---- --------------------- -------------------- --
-----------------------
-----
---
-----
------
-
-
----- ------ - ---------
---------------------------------------------- -----------
-------------------------- ----- ---- -- -
-------------------
--
--------------- ----- ----- ---- -- -
----- ------- - --
----- ---- - ----- ------------------
----- - ----- -------------------- - - ----- -----------------------
------------- ------------------ ------------------
---- ----------- --
---------------
-
---------
----------------
-----
--------------------
--
-
--
------------------- -- -- -
---------------- --------- -- ---- ------
--来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005663d81e8991b448e2424