简介
在 React 的服务器端渲染中，需要在服务端获取数据后再进行页面渲染，而 Redux 作为 React 状态管理的一种解决方案也有着强大的异步数据处理能力。然而，在服务器端渲染中，前端异步请求数据常常会带来一定的负担和复杂度。
于是，redux-ssr-fetch 应运而生，它作为一个 Redux 中间件，可以在服务器端和客户端均使用，用于简化前端异步请求数据的流程，缓解后端的负担和前端的复杂度。
安装
可以通过 npm 安装 redux-ssr-fetch
npm install redux-ssr-fetch --save
使用
1. 安装依赖
redux-ssr-fetch 中的核心依赖是 isomorphic-fetch，请确保已经安装，如果没有请安装：
npm install isomorphic-fetch --save
2. 引入中间件
在 Redux store 中引入 redux-ssr-fetch 中间件并配置，以 Express 服务器为例：
-- -------------------- ---- -------
------ - ------------ --------------- - ---- -------
------ --------------- ---- -------------
------ - --------------------- - ---- -----------------
------ ----------- ---- ------------
----- ----- - ------------
------------
----------------
----------------
-----------------------
------
-------- -----------------------
--
-
-
-- ---其中，fetch 为 isomorphic-fetch 的 fetch 方法。
3. 编写 action
使用 redux-ssr-fetch，我们需要为异步请求数据的 action 加上一个 @ssrFetch 的标识：
-- -------------------- ---- -------
------ ----- ---- ------------------
------ ----- ------------------ - --------------------
------ ----- ------------------ - --------------------
------ ----- ------------------ - --------------------
-------- ------------- -
------ -
----- ------------------
-
-
-------- ----------------- -
------ -
----- -------------------
----
-
-
-------- --------------------- -
------ -
----- -------------------
-----
-
-
------ -------- ----------------- -
------ -
-- -- --------- ---
------------ -
--------- -----------------------
------------- -
------- -----
--
-------------- ------------
-------------- ------------
-------------- ---------------
-
-
-其中，endpoint 为请求的地址，fetchOptions 为 fetch 方法的选项，requestAction、successAction、failureAction 分别为开始请求、请求成功、请求失败时的 action。
下面是一个完整的 action 示例：
-- -------------------- ---- -------
------ ----- ---- ------------------
------ ----- ------------------ - --------------------
------ ----- ------------------ - --------------------
------ ----- ------------------ - --------------------
-------- ------------- -
------ -
----- ------------------
-
-
-------- ----------------- -
------ -
----- -------------------
----
-
-
-------- --------------------- -
------ -
----- -------------------
-----
-
-
------ -------- ----------------- -
------ -
------------ -
--------- -----------------------
------------- -
------- -----
--
-------------- ------------
-------------- ------------
-------------- ---------------
-
-
-4. 组件的服务端渲染
使用这个 package 则可以非常简单的解决服务端渲染异步请求出现的某些问题，比如 Hydration 过程中的异步数据的请求和加载等问题。
5. 客户端激活
使用 redux-ssr-fetch，你可以在客户端继续使用服务端渲染的数据，即所谓的客户端激活（Client hydration）。
当客户端使用 React 重新渲染页面时，需要将服务器端渲染已经获取的数据传递给客户端渲染的 store，以便在这些组件的生命周期中使用而不是重新获取这些数据。
我们需要使用 hydrate 函数来更新客户端 store：
-- -------------------- ---- -------
------ ----- ---- -------
------ -------- ---- -----------
------ - -------- - ---- -------------
------ -------------- ---- ---------
------ --- ---- -------
-- ----------------
----- ------------ - --------------------------
-- ---------- -----
----- ----- - ----------------------------
-----------------
--------- --------------
---- --
------------
-------------------------------
-6. 服务端和客户端处理 diff
因为在服务端和客户端获取的数据可能会不一致，我们需要在服务端和客户端都对组件进行 diff，来保证渲染一致性。
在服务端渲染结束后，我们需要将当前 store 的状态与服务端渲染时的状态进行比较，以确保它们是一致的：
-- -------------------- ---- -------
----- ---- - ---------------
--------- --------------
---- --
-----------
-
----- ---------- - ----------------
----- ---- - -
--------- -----
------
------
--------- -----------
-------
------
---- -----------------------
---- --------------- ---
--------
-------------------------- - ------------------------------------------ -----------
---------
------- -------------------------------
-------
-------
-在客户端，我们也需要对服务端渲染的数据进行处理：
-- -------------------- ---- -------
------ ----- ---- -------
------ -------- ---- -----------
------ - -------- - ---- -------------
------ -------------- ---- ---------
------ --- ---- -------
-- ----------------
----- ------------ - --------------------------
-- ---------- -----
----- ----- - ----------------------------
-- -----------------
------ --------------------------
-----------------
--------- --------------
---- --
------------
-------------------------------
-示例代码
可以通过以下仓库获取示例代码：
git clone https://github.com/example/redux-ssr-fetch.git cd redux-ssr-fetch/example npm install npm run start
访问 http://localhost:3000/ 即可查看示例应用。
结束语
使用 redux-ssr-fetch 能大幅度简化服务端渲染时的异步数据请求流程，提高代码的可维护性和可读性，可以是一种非常好的方式提高 React 应用的渲染性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067008e361a36e0bce8bd1