React服务器端渲染的配置方法

在进行网站开发时，React服务器端渲染（Server-Side Rendering，SSR）是一个提升网页加载速度和优化搜索引擎优化（Search Engine Optimization，SEO）的有效技术。其核心特征包括：改善首屏加载时间、优化SEO、提高内容可访问性。对于SEO的贡献在于，服务器端渲染可以生成可供搜索引擎爬虫直接索引的页面，使得React应用更为友好地暴露给搜索引擎。

一、基于 Node.js 的服务器配置

服务器端渲染通常要求有一个可以执行JavaScript代码的服务器环境。Node.js 是实现React服务器端渲染的常见选择，因为它能够理解JSX并运行React。

首先，您需要设立一个Node.js服务器，可以选择Express框架，其代码结构简单且灵活。首先安装Express：

npm install express

然后，在项目中创建一个新的服务器入口文件，比如 server.js:

const express = require('express');
const app = express();
app.get('*', (req, res) => {
  // 此处将放置服务器端渲染代码
});
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server is listening on port ${PORT}`);
});

二、服务器端渲染处理

接下来，在服务器中对React组件进行处理。首先，您需要安装React和ReactDOM服务器端渲染相关的库：

npm install react react-dom react-router-dom

接着，您必须确保构建流程可以支持服务端渲染。可以使用Webpack等构建工具，并确保有一个服务端专属的配置。

在 webpack.server.config.js 中配置如下：

const path = require('path');
const nodeExternals = require('webpack-node-externals');
module.exports = {
  target: 'node',
  externals: [nodeExternals()],
  entry: './src/server/index.js',
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'server.js'
  },
  // 更多配置...
};

使用 webpack-node-externals 可以防止Node模块被打包进输出文件中。

三、模板字符串和渲染函数

当服务器接收到请求时，需要生成HTML内容。采用模板字符串和 ReactDOMServer.renderToString 方法可以将React组件转换成HTML字符串。

在 server.js 文件中，更新请求处理函数：

const express = require('express');
const ReactDOMServer = require('react-dom/server');
const App = require('./path-to-your-react-app-component');
app.get('*', (req, res) => {
  const html = ReactDOMServer.renderToString(<App />);
  res.send(`
    <!DOCTYPE html>
    <html>
    <head>
        <title>Your App</title>
    </head>
    <body>
        <div id="app">${html}</div>
    </body>
    </html>
  `);
});

此代码段展示了如何将React组件转换为HTML，并将其嵌入到服务器向客户端发送的响应中。

四、处理客户端激活

服务器端渲染生成的HTML需要在客户端被React代码"激活"以支持交互性。您需要将构建好的客户端代码包含到您的HTML中。

<script src="/static/js/bundle.js"></script>

确保Webpack客户端配置输出的文件能够通过服务端正确的路由访问到。

五、数据预加载和状态管理

为了提高用户体验，服务器端通常需要预加载数据并将其嵌入到服务端渲染的页面中。这通常涉及到一个状态管理库，如Redux，与服务器端渲染协同工作。

创建一个存放初始化状态的脚本标签：

const initialState = {}; // 用你的方法获取初始状态
const html = ReactDOMServer.renderToString(<App initialState={initialState} />);
const script = `<script>window.__INITIAL_STATE__ = ${JSON.stringify(initialState)}</script>`;
res.send(`
    <!DOCTYPE html>
    <html>
    <head>
        <title>Your App</title>
    </head>
    <body>
        <div id="app">${html}</div>
        ${script}
    </body>
    </html>
`);

客户端代码需要读取这个全局变量以恢复服务器端的状态。

六、路由和异步数据获取

对于使用React Router的应用，需要确保服务器端和客户端使用相同的路由配置。

const { StaticRouter } = require('react-router-dom');
app.get('*', (req, res) => {
  const context = {};
  const html = ReactDOMServer.renderToString(
    <StaticRouter location={req.url} context={context}>
      <App />
    </StaticRouter>
  );
  // 处理context重定向和其他事情
  res.send( /* ... */ );
});