在 React 应用程序中处理服务器端渲染（Server Side Rendering，简称 SSR）是一种提高性能和搜索引擎优化（SEO）的技术。通过在服务器端生成 HTML 内容，然后将完整的 HTML 页面发送给客户端，可以减少客户端的渲染时间，提高首屏加载速度。本文将详细介绍如何在 React 应用程序中实现服务器端渲染。
首先，我们需要安装一些必要的依赖包。在项目根目录下运行以下命令：
npm install react-dom/server
接下来，我们需要创建一个服务器端渲染的入口文件。在项目根目录下创建一个名为 ssr.js 的文件，并在其中编写以下代码：
import React from 'react';
import ReactDOMServer from 'react-dom/server';
import App from './src/App';
const render = (req, res) => {
const html = ReactDOMServer.renderToString(<App />);
res.send(`
<!DOCTYPE html>
<html>
<head>
<title>React SSR</title>
</head>
<body>
<div id="root">${
html}</div>
<script src="/bundle.js"></script>
</body>
</html>
`);
};
export default render;
在这个文件中，我们导入了 react-dom/server 模块，并使用 ReactDOMServer.renderToString() 方法将 <App /> 组件渲染为字符串。然后，我们将渲染后的 HTML 字符串插入到响应的 HTML 模板中，并发送回客户端。
接下来，我们需要创建一个 Express 服务器来处理客户端的请求。在项目根目录下创建一个名为 server.js 的文件，并在其中编写以下代码：
import express from 'express';
import render from './ssr';
const app = express();
app.use(express.static('public'));
app.get('*', render);
app.listen(3000, () => {
console.log('Server is running on port 3000');
});
在这个文件中，我们创建了一个 Express 应用，并将所有请求路由到 render 函数。我们还使用 express.static() 中间件来提供静态文件，如 CSS、JavaScript 等。
最后，我们需要修改 Webpack 配置文件，以便在生产环境中使用服务器端渲染。在 webpack.config.js 文件中添加以下代码：
module.exports = (env, options) => {
const isProduction = options.mode === 'production';
return {
// ...其他配置项
plugins: [
// ...其他插件
isProduction && new HtmlWebpackPlugin({
template: './src/index.ssr.html',
filename: 'index.ssr.html',
inject: false,
}),
].filter(Boolean),
};
};
在这个文件中，我们根据环境变量判断是否为生产环境。如果是生产环境，我们使用 HtmlWebpackPlugin 插件生成一个名为 index.ssr.html 的文件，该文件将作为服务器端渲染的入口。
至此，我们已经完成了在 React 应用程序中处理服务器端渲染的所有步骤。现在，我们可以运行以下命令启动服务器：
node server.js
当客户端访问我们的应用程序时，服务器将返回一个完整的 HTML 页面，从而提高首屏加载速度和 SEO。
