详解React服务端渲染从入门到精通

很高兴为您提供关于“详解React服务端渲染从入门到精通”的完整攻略。

什么是 React 服务端渲染

React 是基于组件化开发的前端框架，通过组件化开发可以提高代码的可读性和可维护性。但是 React 作为一个 SPA（单页应用），无论是从 SEO 还是展示效果上都不利于搜索引擎的识别和爬取，而且对于网速较慢的用户或不支持 JavaScript 的用户将无法正常访问，所以需要使用服务端渲染来解决这个问题。

服务端渲染是指将 React 组件在服务端进行渲染，并将生成的 HTML 字符串输出到前端浏览器，从而实现网页的快速显示和 SEO 优化。

React 服务端渲染的基本步骤

要使用 React 服务端渲染首先需要安装 Node.js 环境和一些相关的库和插件，下面是 React 服务端渲染的基本步骤：

步骤一：渲染 React 组件

在服务端使用 ReactDOMServer 将 React 组件渲染为 HTML 字符串。

const ReactDOMServer = require('react-dom/server');
const React = require('react');
const App = require('./App.jsx');

const html = ReactDOMServer.renderToString(
  React.createElement(App)
);

上面的代码中，我们使用了 require 方法引入了必要的库和组件，并使用 ReactDOMServer.renderToString 方法将 App 组件渲染为 HTML 字符串。

步骤二：将 HTML 字符串插入到 HTML 模板中

为了方便客户端的加载和 SEO 优化，我们需要将生成的 HTML 字符串插入到 HTML 模板中，并记得将渲染后的组件状态传递给客户端。

const fs = require('fs');
const path = require('path');
const express = require('express');
const App = require('./App.jsx');

const app = express();

const template = fs.readFileSync(
  path.resolve(__dirname, 'index.html'),
  'utf-8'
);

app.get('/', (req, res) => {
  const html = ReactDOMServer.renderToString(
    React.createElement(App)
  );

  const finalHtml = template
    .replace('{{SSR}}', html)
    .replace('{{STATE}}', JSON.stringify(App.getInitialState()));

  res.send(finalHtml);
});

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

上面的代码中，我们使用了 Express 框架构建了一个简单的 Web 应用程序，并通过 fs 和 path 库读取了 HTML 模板文件，然后在路由中将渲染后的 HTML 字符串插入到模板中，再将模板发送给客户端。

步骤三：客户端预取数据并注入状态

当客户端收到服务端返回的 HTML 文件后，浏览器会重新加载页面并重新渲染，这时候我们需要将组件的状态传递给客户端，以保证客户端浏览器重新渲染后和服务端渲染结果一致。

const React = require('react');
const ReactDOM = require('react-dom');
const App = require('./App.jsx');

const initialState = JSON.parse(
  document.querySelector('#initial-state').innerHTML
);

ReactDOM.hydrate(
  React.createElement(App, initialState),
  document.getElementById('root')
);

上面的代码中，我们使用 ReactDOM.hydrate 方法将 App 组件和服务端传递过来的初始状态进行注入，以保证客户端渲染结果同服务端一致。

React 服务端渲染的缺点

尽管 React 服务端渲染可以解决单页面应用 SEO 问题和首次加载速度问题，但是也有一些缺点：

• 服务器压力比较大，因为需要在服务端进行组件渲染。
• 服务端渲染相对较复杂，需要深入学习和理解相关知识。
• React 服务端渲染并非适用于所有场景，需要根据业务需求选择合适的渲染方式。

示例说明

这里给出两个使用 React 服务端渲染的示例，分别为使用 Express 和 Koa 框架渲染 React 组件：

Express 示例

const fs = require('fs');
const path = require('path');
const express = require('express');
const ReactDOMServer = require('react-dom/server');
const App = require('./App.jsx');

const app = express();

const template = fs.readFileSync(
  path.resolve(__dirname, 'index.html'),
  'utf-8'
);

app.get('/', (req, res) => {
  const html = ReactDOMServer.renderToString(
    React.createElement(App)
  );

  const finalHtml = template
    .replace('{{SSR}}', html)
    .replace('{{STATE}}', JSON.stringify(App.getInitialState()));

  res.send(finalHtml);
});

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

Koa 示例

const fs = require('fs');
const path = require('path');
const Koa = require('koa');
const Router = require('koa-router');
const mount = require('koa-mount');
const serve = require('koa-static');
const ReactDOMServer = require('react-dom/server');
const App = require('./App.jsx');

const app = new Koa();
const router = new Router();

const template = fs.readFileSync(
  path.resolve(__dirname, 'index.html'),
  'utf-8'
);

router.get('/', (ctx) => {
  const html = ReactDOMServer.renderToString(
    React.createElement(App)
  );

  const finalHtml = template
    .replace('{{SSR}}', html)
    .replace('{{STATE}}', JSON.stringify(App.getInitialState()));

  ctx.body = finalHtml;
});

app.use(mount('/public', serve(path.resolve(__dirname, 'public'))));
app.use(router.routes());
app.listen(3000, () => {
  console.log('Server is running');
});

总的来说，React 服务端渲染是提高网站性能和 SEO 的一个不错的选择，但也有其自身的局限性，需要开发人员针对业务需求进行选择。