React 是一个用于构建用户界面的 JavaScript 库，其流行度已经超过了其他类似库和框架。在前端开发中，React 经常被用于构建单页应用程序（SPA），但它也可以用于服务端渲染（SSR）。
服务端渲染是将 React 组件预先渲染为 HTML 字符串，并将这些字符串发送给客户端，而不是等待客户端执行 JavaScript 来渲染页面的技术。这种技术的好处是可以减少首次加载的时间，提高性能，并支持搜索引擎优化（SEO）。
为什么使用服务端渲染？
在 SPA 中，客户端会下载所有的 JavaScript 代码，并在浏览器中执行以组合页面。这样做有一些明显的缺点：
- 用户需要等待 JavaScript 加载和执行，因此首次加载时间较长。
- 搜索引擎爬虫无法执行 JavaScript，因此无法正确抓取并索引页面内容。
- 对于较慢的设备和网络，JavaScript 可能需要几秒钟才能加载和执行，这会导致空白或闪烁的页面。
服务端渲染可以解决这些问题。通过在服务器上预先渲染 React 组件并将 HTML 发送给浏览器，可以：
- 加快首次加载时间，因为浏览器只需要下载和显示 HTML 和 CSS，而不需要等待 JavaScript 执行。
- 支持搜索引擎爬虫，因为它们可以直接抓取和索引服务端渲染的 HTML。
- 改善设备和网络较慢的用户的体验，因为页面内容可以更快地呈现。
如何进行服务端渲染？
在 React 中进行服务端渲染需要以下步骤：
- 创建一个 Express 或 Koa 应用程序并安装 React 和相关中间件。
- 在服务器端，将 React 组件渲染为 HTML 字符串。
- 发送此 HTML 字符串和相关资源（例如样式表和脚本文件）给客户端以呈现应用程序。
- 在客户端中，使用 React 将应用程序呈现到 DOM 中，使其可交互。
步骤 1：创建应用程序
在服务器端创建 Express 应用程序：
const express = require('express');
const path = require('path');
const app = express();
const port = process.env.PORT || 3000;
app.use(express.static(path.join(__dirname, 'public')));
app.listen(port, () => {
console.log(`Server listening on port ${port}`);
});此应用程序将提供静态资源（例如样式表和脚本文件）和服务端渲染的 HTML。
步骤 2：服务器端渲染
要将 React 组件渲染为 HTML 字符串，可以使用 ReactDOMServer.renderToString() 方法。例如，下面是渲染 <HelloWorld /> 组件的示例：
import React from 'react'; import ReactDOMServer from 'react-dom/server'; import HelloWorld from './HelloWorld'; const html = ReactDOMServer.renderToString(<HelloWorld />); console.log(html);
步骤 3：发送 HTML 和资源
将 HTML 和静态资源发送到客户端可以通过 Express 的路由处理函数实现：
-- -------------------- ---- -------
------ ------- ---- ----------
------ ---- ---- -------
------ ----- ---- --------
------ -------------- ---- -------------------
------ ---------- ---- ---------------
----- --- - ----------
----- ---- - -----
------------------ ----------------------------------- ------------
------------ ----- ---- -- -
----- ---- - ----------------------------------------- ----
----------
------
------
------------ -------------
----- ---------------- -------------------------
------- ---------------------------------
-------
------
---- ----------------------
-------
-------
---
---
---------------- -- -- -
------------------- --------- -- ---- ----------
---此代码将服务器渲染的 HTML 字符串嵌入到页面中并将样式表和脚本文件作为静态资源加载。
步骤 4：客户端渲染
要在客户端中将 React 组件呈现到 DOM 中，可以使用 ReactDOM.hydrate() 方法。例如，下面是将 <HelloWorld /> 组件呈现到 DOM 中的示例：
import React from 'react';
import ReactDOM from 'react-dom';
import HelloWorld from './HelloWorld';
ReactDOM.hydrate(<HelloWorld />, document.getElementById('app'));注意，此代码调用了 ReactDOM.hydrate() 方法而不是 ReactDOM.render() 方法。这表示在客户端渲染之前，服务器端已经渲染了同样的 HTML，以便客户端可以接管并改变 React 组件。
总结
在本文中，我们介绍了 React 中的服务端渲染和使用方法。服务端渲染可以提高性能，支持搜索引擎优化，并改善较慢设备和网络的用户体验。要在 React 中进行服务端渲染，需要将组件渲染为 HTML 字符串并在服务器上发送静态资源和 HTML 字符串，然后在客户端中使用 ReactDOM.hydrate() 方法进行客户端渲染。这种技术需要一些额外的工作，但它可以改善 React 应用程序的性能和可用性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6479f549968c7c53b05d9c87