React SSR 服务端渲染是一种将 React 应用程序在服务器端进行渲染的技术。当用户第一次访问一个网站时，浏览器会从服务器下载一个 HTML 文件并渲染该文件。如果使用了 React SSR 技术，服务器端将能够生成 React 组件，并将其包含在 HTML 文件中，这样用户在访问网站时可以更快地看到内容。
为什么需要 React SSR 服务端渲染？
使用 React SSR 技术可以带来以下优点：
1. 更好的 SEO
当搜索引擎抓取一个网站时，它会查看 HTML 页面并尝试理解网站的内容。如果网站是只有 JavaScript 的单页应用程序，则搜索引擎可能无法正确地解析网站的内容。但如果使用 React SSR 技术，在服务器端设置正确的 meta 标记以及其他 SEO 优化技术，搜索引擎就可以更好地解析网站。
2. 更好的性能
在使用 React SSR 技术时，一部分处理逻辑会在服务器端执行，可以减少客户端的工作量。因此，在使用 React SSR 技术时，网站可以更快地加载并响应请求。
如何开始使用 React SSR 服务端渲染？
步骤 1：安装依赖
要开始使用 React SSR 技术，需要在项目中安装一些依赖项。可以使用以下命令来安装这些依赖项：
npm i express react react-dom npm i -D webpack webpack-cli babel-loader @babel/core @babel/preset-env @babel/preset-react
上面的命令将安装以下软件包：
- express：用于创建服务器
- react：核心 React 库
- react-dom：用于渲染 React 应用程序
- webpack：JavaScript 模块打包器
- babel-loader：打包器处理 Babel 语法
- @babel/core：Babel 的核心
- @babel/preset-env：将最新的 JavaScript 特性转换为向后兼容代码的规则集
- @babel/preset-react：将 JSX 转换为 JavaScript
步骤 2：创建 Webpack 配置
现在可以为 React SSR 应用程序创建一个 Webpack 配置文件。在项目根目录下创建一个名为 webpack.config.js 的文件，并使用以下内容填充它：
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
------ -----------------
------- -
--------- ------------
----- ----------------------- --------
--
------- -
------ -
-
----- --------
-------- ---------------
---- -
------- ---------------
-------- -
-------- --------------------- -----------------------
--
--
--
--
--
--上述配置文件将编译 ./src/index.js 文件，并将输出写入 ./dist/bundle.js 文件。它还将设置 Babel 加载器以处理 JavaScript 文件。
步骤 3：创建服务器端代码
现在可以为 React SSR 应用程序编写服务器端代码。在项目根目录下创建一个名为 server.js 的文件，并使用以下内容填充它：
-- -------------------- ---- -------
----- ------- - -------------------
----- ----- - -----------------
----- -------------- - ----------------------------
----- --- - ---------------------
----- --- - ----------
--------------------------------
------------ ----- ---- -- -
----- ---- - ---------------------------------- ----
----------
--------- -----
------
------
----- ----------------
----- --------------- ---------------------------- -------------------
------------ --- ---------------
-------
------
---- -----------------------
------- ---------------------------
-------
-------
---
---
---------------- -- -- ------------------- ------- -- -------------------------上述代码将使用 Express 库创建一个服务器，将静态文件从 ./dist 目录提供给客户端，运行渲染 React 组件的代码，并将其渲染为字符串。服务器还会将该字符串作为响应发送给客户端，并在 HTML 中包含一个 ID 为 root 的 DIV 元素，使浏览器可以渲染整个 React 应用程序。
步骤 4：创建客户端代码
现在还需要编写客户端代码，以便 React 组件可以在客户端上运行。在项目根目录下创建一个名为 src/index.js 的文件，并使用以下内容填充它：
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.hydrate(<App />, document.getElementById('root'));上述代码将使用 ReactDOM 库，将 React 组件渲染到具有 ID root 的 HTML 元素中。这样，当应用程序在浏览器中执行时，React 将继续负责这个元素的渲染。
步骤 5：运行应用程序
现在可以运行应用程序了！通过使用以下命令可以在终端中启动服务器：
node server.js
然后，可以在浏览器中访问 http://localhost:3000，就会看到 React 组件被渲染到屏幕上。
React SSR 服务端渲染实战
上面的例子展示了如何在 React SSR 应用程序中使用基本的 React 组件，但是在实际应用中，可能需要更复杂的数据管理、应用程序状态等。这时，Redux 可能是一种有用的技术。
Redux 集成实例
使用 Redux 和 React SSR 技术创建应用程序的步骤：
- 安装依赖项：
npm i redux react-redux
- 创建
store.js文件来创建 Redux Store，放入以下代码：
-- -------------------- ---- -------
------ - ----------- - ---- --------
----- ------------ - - -------- ------ ----- ---- --
----- ------- - ------ - ------------- ------- -- -
------ ------------- -
---- ----------
------ - --------- -------- ----- ----- ---- --
---- ---------
------ - --------- -------- ------ ----- ----------- --
--------
------ ------
-
--
----- ----- - ---------------------
------ ------- ------以上代码将创建一个具有 loading 和 data 属性的 Store，并且在调度载入和加载状态。
- 修改
App.js文件，引入服务端 CSS 文件，并在组件中引用样式组件loader.css路径等：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------------ ----------- - ---- --------------
------ ------ ---- -----------
------ ---------------
----- --- - -- -- -
----- - -------- ---- - - ------------------- -- -------
----- -------- - --------------
------------ -- -
---------- ----- --------- ---
----- -------- ----------- -
----- --- - ----- ------------------------------------------------------
----- ---- - ----- -----------
------------------
---------- ----- --------- ----- ---- ---
-
------------
-- ------------
----- ---------- - -- -- -
------ -
-----
------ -------------
--------- ----------------
------
--
-
------ -
-----
--------- ----- ---------
- ------- - ------- -- - ------------ -
------
-
-
------ ------- ----- 修改
server.js文件，添加 Server 端渲染的 CSS 文件，包括Store 服务器端初始化：
-- -------------------- ---- -------
------ - -------- - ---- --------------
----- --- - ----------
----------------------------------
------------ ----- ---- -- -
----- ----- - -------------------
----- ------- - ---
----- ---- - ------------------------------
--------- --------------
------------- ------------------ ------------------
---- --
---------------
-----------
--
----- -------------- - ---------------------------------
----- --------- - ---------------------
----------
--------- -----
------
------
----- ----------------
----- --------------- ---------------------------- -------------------
------------ --- ---- ----- ---------------
------------
-------
------
---- -----------------------
--------
-------------------------- - ------------------
---------
------- ---------------------------
-------
-------
---
---上述代码将初始化 Store，同时使用 Provider 组件并传递 Store 对象。服务器端使用 configureStore 函数初始化 Store，设置初始状态属性。
- 修改
index.js文件，提取 Server 端传来的预加载状态，并传递给 Client 端的 Store 对象，保证 Client 端和 Server 端状态一致：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - -------- - ---- --------------
------ - ------- - ---- ------------
------ --- ---- --------
------ -------------- ---- -------------
----- -------------- - ---------------------------
------ ---------------------------
----- ----- - -------------------------------
--------
--------- ------- ----- --
---- --
------------
------------------------------
--以上步骤将在 React SSR 应用程序中引入 Redux 技术：通过 Store 管理应用程序的状态，并在客户端和服务端之间维护状态的一致性。
总结
本文介绍了 React SSR 服务端渲染的基本概念，并提供了基本的 React SSR 实现示例。然后，介绍了如何使 React SSR 在 Redux 应用程序中起作用，展示了如何在服务端和客户端之间维护应用程序状态的一致性。React SSR 技术能够提高应用程序的性能和 SEO，但需要更多的学习和维护。希望读者能够在实际应用中使用 React SSR 并得到不错的体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648558a448841e9894437540