Redux 中如何处理服务器端渲染？
在 Web 应用开发中，服务器端渲染 (SSR) 已经成为了前端极为重要的一部分。而对于 Redux 作为前端的一个重要状态管理库，如何进行服务器端的渲染呢？对于这个问题，本文将从几个方面进行讲解。
一、服务器端渲染的原理
在 Web 应用开发中，客户端渲染 (CSR) 是最常见的渲染方式。在 CSR 中，当用户在浏览器中访问页面时，会进行一系列的网络请求，将 HTML、CSS、Javascript 文件下载到本地，然后在客户端进行渲染。而 SSR 则是在服务端进行 HTML 的渲染，然后将渲染后的 HTML 代码返回给浏览器，最后进行后续的渲染操作。
这种方式的好处是可以提高页面的加载速度，减少因网络请求带来的等待时间。特别是对于一些网速较慢的用户，在大流量的情况下，会明显感受到 SSR 带来的体验提升。
二、Redux 在服务器端的使用
对于 Redux 在服务器端的使用，主要是对于应用的初始化操作，包括预取数据、状态注入等。因为服务器端渲染并不会触发类似客户端渲染中的事件操作，所以我们需要显式地获取或注入状态信息。
首先，在服务器端创建 Redux 的 store：
import { createStore } from 'redux';
import rootReducer from './reducers/index';
const store = createStore(rootReducer);这里我们使用了一个 rootReducer，它是整个应用的根 reducer。
然后，我们在服务器端获取数据，并初始化 store：
-- -------------------- ---- -------
------ - -------------- - ---- -------------------
------ - -------- - ---- --------------
------ --- ---- -------------------
------ - --------- - ---- ------------------
------------ ----- ---- -- -
---------------------------
-------- -- -
----- ------- - ---------------
--------- --------------
---- --
-----------
--
---------------------------- --------
---
---这里的 fetchData 是一个异步 action，用于预取应用所需的数据。在获取数据完成后，我们将 store 传入 Provider 中，用于应用的状态注入。
在上面的代码中，我们还看到了 renderHTML 函数。这个函数的作用是将应用的渲染结果注入到 HTML 中，并按照一定的规则返回渲染后的 HTML 代码。这个函数可以根据应用的不同规模自行定制。
三、使用异步 action
在服务器端渲染中，我们也可能需要使用异步 action 来获取数据。因为异步 action 是返回 Promise 的，所以我们可以借助 Promise 来等待数据获取完成后再进行后续操作。
在服务器端使用异步 action 的时候，有一些需要注意的事项。首先，我们需要将异步操作中的 fetch、XMLHttpRequest 等相关 API 替换为服务端 API，如使用 axios 进行网络请求。另外，因为在服务器端渲染中不存在像客户端那样的事件操作，所以不需要使用 Redux-thunk 等类似的中间件。
最后，由于服务器端渲染只会在应用初始化时进行一次，所以我们需要在客户端启动时重新获取数据。
-- -------------------- ---- -------
------ - --------- - ---- ------------------
------ - ------ - ---- ------------
------ - -------- - ---- --------------
------ --- ---- -------------------
----- ----- - -------------------------
---------------------------
-------- -- -
-------
--------- --------------
---- --
------------
-------------------------------
--
---四、总结
Redux 在服务器端渲染中的使用可以提高页面的加载速度和用户体验。需要注意的是，在服务器端渲染时，我们需要显式地获取或注入状态信息，或使用异步 action 进行数据获取。在客户端启动时需要重新获取数据。
最后，Demo 代码如下：
服务端(index.js)：
-- -------------------- ---- -------
------ ------- ---- ----------
------ - -------------- - ---- -------------------
------ - -------- - ---- --------------
------ --- ---- ------------
------ - ----------- - ---- --------
------ -------- ---- -----------------
------ - --------- - ---- ----------------
----- --- - ----------
----- ---- - -----
----------------------------------
------------ ----- ---- -- -
----- ----- - ----------------------
---------------------------
-------- -- -
----- ------- - ---------------
--------- --------------
---- --
-----------
--
-------------------------------- --------
---
---
-------- ----------------------- ------ -
------ -
--------- -----
------
------
------------ --- ---------------
-------
------
---- --------------------------
--------
-------------------------- - -----------------------------------
---------
------- --------------------------
-------
-------
--
-
---------------- -- -- ---------------------- -- ---- -----------前端：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------- - ---- --------------
------ - --------- - ---- ------------
----- --- ------- --------- -
------------------- -
-- ------------------ -
-----------------------
-
-
-------- -
------ -
----
------------------------- -- -
--- -------------------------------
---
-----
--
-
-
----- --------------- - ----- -- --
----- ----------
---
------ ------- ------------------------ - --------- --------线上示例：https://redux-ssr-example.herokuapp.com/
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6493ad0c48841e989414a214