服务器端渲染（Server-side rendering，简称SSR）是指将React应用在服务器端渲染成HTML字符串，然后再将该字符串发送给客户端进行展示。这种方式相比传统的客户端渲染（Client-side rendering，简称CSR），能够更快地渲染出页面内容，提升用户体验和SEO。
React SSR的实现主要借助于Node.js，利用服务器端语言的能力来执行React代码，并将生成的HTML字符串返回给客户端。下面我们将介绍使用React SSR进行服务器端渲染的方法及相关标签拼接方法。
1. 使用React SSR进行服务器端渲染的方法
1.1 安装依赖
首先，在项目中安装相关依赖：
npm install react react-dom express
1.2 创建服务器端代码
在项目根目录下创建一个 server.js 文件，用于编写服务器端代码：
// 引入所需模块
import express from 'express';
import React from 'react';
import { renderToString } from 'react-dom/server';
import App from './App'; // 你的React组件
const app = express();
// 设置静态文件目录
app.use(express.static('public'));
// 定义路由，使用renderToString方法将React组件渲染成HTML字符串
app.get('/', (req, res) => {
const html = renderToString(<App />);
res.send(`
<!DOCTYPE html>
<html>
<head>
<title>React SSR</title>
</head>
<body>
<div id="root">${html}</div>
<script src="/bundle.js"></script> // 客户端bundle.js
</body>
</html>
`);
});
// 监听端口
app.listen(3000, () => {
console.log('Server is running on port 3000');
});
1.3 创建客户端代码
在项目根目录下创建一个 client.js 文件，用于编写客户端代码：
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App'; // 你的React组件
ReactDOM.hydrate(<App />, document.getElementById('root'));
1.4 创建启动脚本
在项目的 package.json 文件中，添加启动脚本：
{
"scripts": {
"start": "node server.js"
}
}
2. 相关标签拼接方法
在上述示例中，我们使用了模板字符串的方式将HTML标签拼接起来，并将React组件渲染成HTML字符串。这种方式虽然简单，但随着页面复杂度的增加，标签的拼接会变得困难且容易出错。为了简化这个过程，可以使用相关标签拼接方法。
2.1 使用第三方库拼接标签
可以使用第三方库如react-helmet来拼接HTML标签，它能够处理页面的 <head> 信息，例如页面标题、元数据等。
安装 react-helmet：
npm install react-helmet
然后在服务器端代码中使用 Helmet 组件来设置 <head> 信息：
import React from 'react';
import { renderToString } from 'react-dom/server';
import { Helmet } from 'react-helmet';
import App from './App';
app.get('/', (req, res) => {
const html = renderToString(<App />);
const helmet = Helmet.renderStatic(); // 获取Helmet生成的标签
res.send(`
<!DOCTYPE html>
<html>
<head>
${helmet.title.toString()} // 插入页面标题
${helmet.meta.toString()} // 插入页面meta标签
</head>
<body>
<div id="root">${html}</div>
<script src="/bundle.js"></script>
</body>
</html>
`);
});
2.2 使用模板引擎拼接标签
另一种方式是使用模板引擎来拼接HTML标签，常见的模板引擎有ejs、pug等。
以ejs为例，先安装 ejs：
npm install ejs
然后在服务器端代码中使用ejs模板引擎来渲染HTML标签：
import React from 'react';
import { renderToString } from 'react-dom/server';
import ejs from 'ejs';
import App from './App';
app.get('/', (req, res) => {
const html = renderToString(<App />);
ejs.renderFile('index.ejs', { html }, (err, str) => {
if (err) {
console.error(err);
res.status(500).end();
} else {
res.send(str);
}
});
});
在项目根目录下创建 index.ejs 文件，内容如下：
<!DOCTYPE html>
<html>
<head>
<title>React SSR</title>
</head>
<body>
<div id="root"><%= html %></div>
<script src="/bundle.js"></script>
</body>
</html>
以上就是使用React SSR进行服务器端渲染的方法及相关标签拼接方法的介绍。通过服务器端渲染，可以提升页面的加载速度和性能，并且有利于SEO优化。同时，使用相关标签拼接方法可以更好地组织HTML标签，提高开发效率和代码的可维护性。
本文来自极简博客，作者：微笑向暖阳，转载请注明原文链接：使用React SSR进行服务器端渲染的方法及相关标签拼接方法
