React 服务端渲染 (SSR) 入门-JavaScript中文网-JavaScript教程资源分享门户

React 是一个非常流行的前端框架，它提供了一种声明式的编程方式，使得构建复杂的 UI 更加容易。但是，由于 React 是一个单页面应用 (SPA) 框架，它的渲染是在浏览器端完成的，这会导致一些问题，比如 SEO 不友好、首屏加载慢等。为了解决这些问题，React 提供了服务端渲染 (SSR) 的功能，可以在服务器端将 React 组件渲染成 HTML，然后将其发送到客户端，从而提高页面的性能和用户体验。

SSR 的优势

SEO 友好：由于搜索引擎爬虫无法执行 JavaScript，所以传统的 SPA 在 SEO 上有很大的劣势。而 SSR 可以将页面的内容提前渲染成 HTML，从而使得搜索引擎能够爬取到页面的内容，提高 SEO 的效果。
首屏加载快：传统的 SPA 在加载页面时需要先下载 JavaScript，然后再执行 JavaScript 渲染页面，这个过程需要一定的时间，导致首屏加载慢。而 SSR 可以将页面的 HTML 提前生成并发送到客户端，从而使得首屏加载更快，提高用户体验。
更好的性能：由于 SSR 可以将页面的 HTML 提前生成并发送到客户端，所以客户端只需要下载 JavaScript，然后执行 JavaScript，从而可以减少网络请求和 JavaScript 的执行时间，提高页面的性能。

SSR 的实现方式

React 提供了两种实现 SSR 的方式：

基于 Node.js 的 SSR：这种方式需要使用 Node.js 来实现 SSR，具体来说，就是使用 Node.js 的 HTTP 服务器来接收客户端的请求，然后使用 React 的 SSR API 将组件渲染成 HTML，并将其发送给客户端。这种方式的优点是可以直接使用 Node.js 的生态系统，比如 Express、Koa 等，同时也可以方便地进行服务器端的数据获取和处理。缺点是需要额外的服务器资源，并且需要对 Node.js 有一定的了解。
基于现有的后端框架的 SSR：这种方式是将 SSR 集成到现有的后端框架中，比如 Spring、Django、Rails 等，具体来说，就是在后端框架中使用 React 的 SSR API 将组件渲染成 HTML，并将其发送给客户端。这种方式的优点是可以直接使用现有的后端框架，无需额外的服务器资源，并且可以方便地进行服务器端的数据获取和处理。缺点是需要对后端框架有一定的了解，并且需要进行一定的集成工作。

在本文中，我们将介绍基于 Node.js 的 SSR 实现方式。

实现 SSR 的步骤

下面是实现 SSR 的主要步骤：

创建一个 Node.js 服务。
使用 React 的 SSR API 将组件渲染成 HTML。
将渲染好的 HTML 发送给客户端。

下面我们将详细介绍每个步骤的实现。

创建一个 Node.js 服务

首先，我们需要创建一个 Node.js 服务来接收客户端的请求。我们可以使用 Express 来创建一个简单的 HTTP 服务器，代码如下：

// javascriptcn.com 代码示例
const express = require('express');
const app = express();

app.get('/', (req, res) => {
  // TODO: 渲染组件并返回 HTML
});

app.listen(3000, () => {
  console.log('Server is listening on port 3000');
});

上面的代码创建了一个 Express 应用，并监听了 3000 端口。当客户端访问根路径时，我们将会渲染组件并返回 HTML。

使用 React 的 SSR API 将组件渲染成 HTML

使用 React 的 SSR API 将组件渲染成 HTML 非常简单，只需要调用 ReactDOMServer.renderToString() 方法即可。下面是一个简单的示例：

import React from 'react';
import ReactDOMServer from 'react-dom/server';

const HelloWorld = () => <div>Hello World!</div>;

const html = ReactDOMServer.renderToString(<HelloWorld />);

console.log(html);

上面的代码定义了一个简单的组件 HelloWorld，然后使用 ReactDOMServer.renderToString() 方法将其渲染成 HTML，并将 HTML 输出到控制台。

将渲染好的 HTML 发送给客户端

最后一步是将渲染好的 HTML 发送给客户端。我们可以使用 res.send() 方法将 HTML 发送给客户端，代码如下：

// javascriptcn.com 代码示例
const express = require('express');
const app = express();
import React from 'react';
import ReactDOMServer from 'react-dom/server';

const HelloWorld = () => <div>Hello World!</div>;

app.get('/', (req, res) => {
  const html = ReactDOMServer.renderToString(<HelloWorld />);
  res.send(html);
});

app.listen(3000, () => {
  console.log('Server is listening on port 3000');
});

上面的代码将渲染好的 HTML 发送给客户端。

SSR 的注意事项

在实现 SSR 的过程中，需要注意以下几点：

组件的生命周期：由于 SSR 是在服务器端执行的，所以组件的生命周期和客户端有所不同。在 SSR 中，组件的生命周期只会执行到 componentWillMount，而不会执行到 componentDidMount，因为 componentDidMount 是在客户端渲染完成之后才会执行的。因此，在编写 SSR 时，需要注意组件的生命周期。
客户端和服务器端的数据同步：由于 SSR 是在服务器端执行的，所以服务器端和客户端的数据可能会不同步。为了解决这个问题，可以将数据通过 HTML 的方式传递给客户端，然后在客户端重新将数据注入到组件中。另外，也可以使用一些第三方的库来解决这个问题，比如 Redux。
代码分割：在 SSR 中，需要将组件的代码分割成多个部分，以便在客户端只加载需要的部分。为了实现代码分割，可以使用 React 的 React.lazy() 和 Suspense API，或者使用第三方库，比如 Loadable Components。

总结

本文介绍了 React 的 SSR 功能，包括 SSR 的优势、实现方式和注意事项。通过本文的介绍，读者可以了解到 SSR 的基本原理和实现方式，并可以在实际项目中使用 SSR 来提高页面性能和用户体验。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65793a91d2f5e1655d338191