在前端开发中，React SSR 是一种常见的技术方案，它可以在服务端渲染 React 组件，提升页面加载速度和 SEO。在本文中，我们将介绍如何使用 Webpack 搭建一个基本的 React SSR 应用。
什么是 React SSR
React SSR （Server-Side Rendering）即服务端渲染，它指的是在服务端使用 React 渲染页面，并将 HTML 字符串发送给客户端。相比于浏览器端渲染，SSR 有以下优势：
- 更快的页面加载速度：在客户端渲染中，JavaScript 需要下载、解析和执行，才能生成页面。这个过程可能会有一定的延迟，而服务端渲染则可以直接输出 HTML 字符串，减少页面加载时间。
- 更好的 SEO：浏览器对于 SPA（Single-Page Application）的爬行和索引做得不够好，在服务端渲染中，可以让搜索引擎更容易地爬行和索引网站内容。
- 更好的首屏渲染：在客户端渲染中，用户会看到一个空白的页面，然后在 JavaScript 加载完毕后才会看到内容。而在服务端渲染中，用户可以立即看到页面的内容。
Webpack 的基本配置
Webpack 是前端工程化中的重要工具之一，它可以将多个 JavaScript 文件打包成一个文件，并自动处理依赖关系。在使用 Webpack 搭建 React SSR 应用之前，我们需要进行一些基本配置：
- 安装 Webpack 和相关插件
npm install webpack webpack-cli babel-loader style-loader css-loader -D
- 创建 Webpack 配置文件
在项目根目录下创建 webpack.config.js 文件，配置基本信息：
-- -------------------- ---- -------
----- ---- - ---------------
-------------- - -
----- --------------
------ ------------------------
------- -
--------- ------------
----- ----------------------- ---------
--
------- -
------ -
-
----- --------
-------- -----------------
---- -
------- ---------------
-------- -
-------- --------------------- ----------------------
-
-
--
-
----- ---------
---- ---------------- -------------
-
-
-
-其中，mode 指定环境为开发模式；entry 指定入口文件，output 指定生成的文件名和路径；module.rules 配置用于加载 JavaScript 和 CSS 文件的 loader。
React SSR
在基本配置完成之后，我们来实现 React SSR。首先，我们需要了解服务端渲染的原理。服务端渲染的工作流程如下：
- 服务端获取数据
- 服务端渲染组件，并将组件输出为 HTML 字符串
- 服务端将 HTML 字符串发送给客户端
- 客户端加载 JS 文件，挂载组件并绑定事件
因此，我们需要将组件代码分为两部分：服务端渲染部分和客户端渲染部分。服务端渲染部分需要将组件渲染为 HTML 字符串，而客户端渲染部分需要加载 JS 文件，并将组件插入到 HTML 中。
服务端渲染部分
首先，我们在服务端中安装 React 和 ReactDOM：
npm install react react-dom -S
然后，我们创建一个 server 目录，用于存放服务端代码。在 server 目录下创建 index.js 文件，代码如下：
-- -------------------- ---- ------- ----- ------- - ------------------ ----- ---- - --------------- ----- ----- - ---------------- ----- -------------- - --------------------------- ----- --- - -------------------------------- ----- ------------ - ------------------------- ----- --- - --------- ------------------------------------------- -------------- ------------ ----- ---- -- - ----- ---- - ---------------------------------- --- ---------------------------- -- ---------------- -- -- - ------------------- -- --------- -- ---- --------- --
其中，htmlTemplate 是一个用于生成 HTML 字符串的函数，暂时先不考虑它。App 是我们的 React 组件，它需要从客户端的 index.js 中导入。renderToString 方法用于将组件渲染为 HTML 字符串，我们将其作为 HTML 的主体内容，发送给客户端。
客户端渲染部分
在客户端中，我们需要在 HTML 文件中添加以下代码，用于加载 JS 文件和挂载组件：
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- ------------ ----------- ------- ------ ---- ---------------- ------- -------------------------- ------- -------
然后，我们需要创建客户端的入口文件 src/client/index.js，代码如下：
import React from 'react'
import ReactDom from 'react-dom'
import App from './App'
ReactDom.hydrate(<App />, document.getElementById('root'))因为服务端已经将组件渲染成 HTML 字符串，客户端只需要将组件挂载到指定元素上即可，这里使用 ReactDom.hydrate 方法实现。
HTML 模板
最后，我们来实现 htmlTemplate 函数，用于生成 HTML 字符串。代码如下：
-- -------------------- ---- -------
-------------- - ------ -- -
------ -
--------- -----
----- ----------
------
----- ----------------
------------ -----------
-------
------
---- -----------------------
------- --------------------------
-------
-------
-
-htmlTemplate 函数将 HTML 内容插入到指定位置上，最终生成一个完整的 HTML 文件。
运行应用
现在，我们来运行我们的 React SSR 应用。首先，在命令行中执行以下命令，启动服务端：
node server/index.js
然后在另外一个命令行窗口中执行以下命令，使用 Webpack 打包客户端代码：
npx webpack --config webpack.config.js
最后，在浏览器中访问 http://localhost:3000，可以看到服务端渲染的 React 组件。
总结
本文介绍了如何使用 Webpack 搭建 React SSR 应用。我们了解了 React SSR 的工作原理，学习了 Webpack 的基本配置，并实现了服务端渲染和客户端渲染的代码，最终成功运行了应用。在实际开发中，我们可以根据需要，进一步完善应用，实现更多功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6451f96c675af4061b5af11a