redux-universal-renderer 是一个用于服务端渲染 React 应用的 npm 包，它结合了 redux 和 react-router 库，可以让你轻松地将数据初始化到 React 组件中并在服务器上为它生成静态 HTML。
本文将介绍如何使用 redux-universal-renderer 实现服务器端渲染 React 应用，并提供深入指导和示例代码。
安装
使用以下命令在项目中安装 redux-universal-renderer：
npm install redux-universal-renderer --save
使用
初始化 Redux Store
首先，我们需要在服务器端初始化 Redux Store。
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ - ------------------- - ---- ---------------------------
------ --------------- ---- --------------
------ ----------- ---- -------------
------ -------- ------------------------------ -
----- ------------------ - ---------------------------------
----- ----------------- - ----------------------------------------
----- ----- - ------------
------------
---------------
-----------------
--
------ ------
-创建渲染器
接下来，我们需要创建一个渲染器函数，它可以接收一个 URL 并返回一个 Promise 对象。
-- -------------------- ---- -------
------ - -------------- - ---- -------------------
------ - --------- - ---- ---------------
------ - -------- - ---- --------------
------ - ------------ - ---- -------------------
------ --- ---- -------- -- -- ----- --
------ ------ ---- ----------- -- ------
------ - -------------- - ---- ----------
------ -------- ---------------------- -
------ --- --------------- -- -
----- ----- - -----------------
----- -------- - ---
----------------- -- -
----- ----- - -------------- -------
-- ------ -- --------------- -
------------------------------------------------------------
-
------ ------
---
----------------------------- -- -
----- ------ - ---------------
--------- --------------
------------- ---------------
---- --
---------------
-----------
--
----------------
---
---
-在这个渲染器函数中，我们首先创建了一个 Redux Store，然后遍历路由配置并查找匹配当前 URL 的路由。如果找到了一个匹配路由，并且该路由拥有 loadData 函数，则将该函数返回的 Promise 存储在 promises 数组中。
当所有的 Promise 都被解决时，我们调用 renderToString 方法将 React 应用转换为字符串，并将其存储在 markup 变量中。最后我们通过 Promise.resolve 将 markup 返回给调用者。
连接到 Express
最后，我们需要将我们的渲染器函数与 Express 整合起来。
-- -------------------- ---- -------
------ ------- ---- ----------
------ - ----------------- - ---- ----------------------
----- --- - ----------
----------------------------------
------------ ----- ---- -- -
-------------------------------------- -- -
----------
--------- -----
------
------
----- ----------------
------------ -----------
-------
------
---- -------------------------
------- --------------------------
-------
-------
---
---
---
---------------- -- -- -
------------------- -- --------- -- ---- -------
---在这个示例代码中，我们创建了一个 Express 应用并启用静态文件服务。然后我们定义了一个处理所有路由的中间件，并将请求的 URL 传递给我们的渲染器函数。最后我们将 React 应用的 HTML 输出到浏览器。
深入指导
Redux Store 的初始化
我们的渲染器函数中使用了一个新的 configureStore 函数。configureStore 函数根据我们在服务器端预加载的数据来初始化 Redux Store。这很重要，因为在客户端和服务器端，我们希望使用同一个 Store 来保持整个应用的状态一致。
React Router 的配置
我们的渲染器函数中还使用了一个 routes 配置数组。这个数组应包含一个对象数组，每个对象都有一个以下属性：
- path：URL 的路径。
- component：用于渲染该 URL 路径的 React 组件。
- exact：为 true 时，只有当前 URL 完全匹配 path 时才会渲染组件。
- loadData：用于预加载组件所需数据的函数。
如果传递给 renderToString 的 React 组件中包含具有相应路径的路由，则 React Router 将出发该组件的渲染，并使用 loadData 函数在服务器端获取所有必需的数据。
使用 React 技术栈
在这个示例代码中，我们使用了以下 React 技术栈：
这里的元素是服务端服务器端，因为我们要在 server 端生成首屏数据，而这里包括的 React 组件和 React 生态系统是前端通用的，因此您可以自由地使用它们。
示例代码
为了帮助你更好地理解所有这些概念，以下是一个完整的示例代码：
-- -------------------- ---- -------
-- ---------
------ ------- ---- ----------
------ - ------------ --------------- - ---- --------
------ - ------------------- - ---- ---------------------------
------ --------------- ---- --------------
------ ----------- ---- -----------------
------ - -------------- - ---- -------------------
------ - --------- - ---- ---------------
------ - -------- - ---- --------------
------ - ------------ - ---- -------------------
------ --- ---- ------------
------ ------ ---- ---------------
----- --- - ----------
----------------------------------
------ -------- ------------------------------ -
----- ------------------ - ---------------------------------
----- ----------------- - ----------------------------------------
------ ------------
------------
---------------
-----------------
--
-
------ -------- ---------------------- ------ -
------ --- --------------- -- -
----- -------- - ---
----------------- -- -
----- ----- - -------------- -------
-- ------ -- --------------- -
------------------------------------------------------------
-
------ ------
---
----------------------------- -- -
----- ------ - ---------------
--------- --------------
------------- ---------------
---- --
---------------
-----------
--
----------------
---
---
-
------------ ----- ---- -- -
----- ----- - -----------------
-------------------------- ------------------ -- -
----- -------------- - -----------------
----------
--------- -----
------
------
----- ----------------
------------ -----------
---------------------------------- - ---------------------------------------------- --------------------
-------
------
---- -------------------------
------- --------------------------
-------
-------
---
---
---
---------------- -- -- -
------------------- -- --------- -- ---- -------
----- -------------------- ---- -------
-- -----------
------ - --------------- - ---- --------
------ - ------------- - ---- ------------
-------- ----------- - --- ------- -
------ ------------- -
---- --------------
------ -------------
--------
------ ------
-
-
------ ------- -----------------
------
----- -------------------- ---- -------
-- ----------
------ ----- ------------- - ----------------
-------- ------------------- -
------ -
----- --------------
------
--
-
------ -------- ------------ -
------ -------- -- -
------ ---------------------------------------------------
-------------- -- ----------------
---------- -- ------------------------------
--
--- -------------------- ---- -------
-- ---------
------ - ---- - ---- --------
----- ---- - ------- -- -----------------------------
----- ----- - ------- -- ------------------------------
------ ------- -
-
----- ----
---------- -----
------ -----
--
-
----- ---------
---------- ------
--------- -- -- -- -- ---------------------------------------------------------
-------------- -- -----------------
--
---- -------------------- ---- -------
-- ------
------ ------ - -------- - ---- --------
------ - ------ ------- ---- - ---- -------------------
------ ---- ---- --------------------
------ ----- ---- ---------------------
-------- ----- -
------ -
-----
----
--------- -----------------------
--------- --------------------- -------------
--------- --------------------- -------------
--------- --------------------- -------------
--------- --------------------- -------------
--------- --------------------- -------------
-----
--- --
--------- ---------------------------------
--------
------ -------- ----- ---------------- --
------ ------------- ----------------- --
---------
-----------
------
--
-
------ ------- ------ -------------------- ---- -------
-- ------------------
------ ----- ---- --------
-------- ------ -
------ -
-----
-------------
--------- ----------
------
--
-
------ ------- ------- -------------------- ---- -------
-- -------------------
------ ------ - --------- - ---- --------
------ - ------------ ----------- - ---- --------------
------ - ---------- - ---- -------------
-------- ------------ -
----- ----- - ----------------- -- -------------
----- -------- - --------------
------------ -- -
-----------------------
-- ------------
------ -
-----
--------------
--------------- -- -
---- -------------------------------
---
------
--
-
------ ------- ------只需执行以下两个步骤即可！
npm installnpm run start
启动服务端并访问 http://localhost:3000！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067011e361a36e0bce8d85