请求协助将React 18.2.0线上应用从CSR转为SSR并修复Meta标签问题

方案一：迁移到Next.js（推荐，快速落地） #

Next.js是React官方主推的SSR/SSG框架，内置完善的Meta标签处理能力，无需依赖react-helmet，能快速解决Meta标题和描述无法被检测的问题。

• 初始化项目：先备份现有代码，执行npx create-next-app@latest medicasapp-ssr，根据现有项目选择React + JavaScript/TypeScript。
• 迁移路由与组件：Next.js采用文件系统路由，将现有路由对应到pages目录下的文件（比如首页对应pages/index.js），把组件迁移到components目录，调整导入路径适配新结构。
• 替换react-helmet为next/head：卸载react-helmet，在页面组件中导入next/head来设置Meta标签：

  import Head from 'next/head'
  
  export default function Home() {
    return (
      <>
        <Head>
          <title>Medicas App - 你的标题</title>
          <meta name="description" content="你的页面描述内容" />
        </Head>
        {/* 现有页面内容 */}
      </>
    )
  }
  

• 测试与部署：本地运行npm run dev，查看页面源码确认Meta标签已在HTML头部渲染；生产环境执行npm run build && npm run start后部署即可。

方案二：自定义React 18 SSR服务（适合完全自定义场景） #

如果不想依赖Next.js，可以基于ReactDOM Server手动搭建SSR服务，注意React 18需使用react-helmet-async替代原react-helmet解决上下文冲突问题。

1. 安装依赖 #

npm install express react-dom@18.2.0 @babel/core @babel/preset-react @babel/preset-env babel-loader webpack webpack-cli webpack-node-externals react-helmet-async

2. 编写服务端代码（server.js） #

import express from 'express';
import React from 'react';
import { renderToString } from 'react-dom/server';
import App from './src/App';
import { HelmetProvider } from 'react-helmet-async';

const app = express();
app.use(express.static('dist'));

app.get('*', (req, res) => {
  // 创建Helmet上下文，避免SSR时的状态污染
  const helmetContext = {};
  const appHtml = renderToString(
    <HelmetProvider context={helmetContext}>
      <App />
    </HelmetProvider>
  );
  const { helmet } = helmetContext;

  // 拼接包含Meta标签的HTML模板
  const html = `
    <!DOCTYPE html>
    <html ${helmet.htmlAttributes.toString()}>
      <head>
        ${helmet.title.toString()}
        ${helmet.meta.toString()}
        ${helmet.link.toString()}
      </head>
      <body ${helmet.bodyAttributes.toString()}>
        <div id="root">${appHtml}</div>
        <script src="/client.bundle.js"></script>
      </body>
    </html>
  `;

  res.send(html);
});

app.listen(3000, () => console.log('SSR服务运行在3000端口'));

3. 配置Webpack打包 #

• 服务端打包配置（webpack.server.config.js）：

  const path = require('path');
  const nodeExternals = require('webpack-node-externals');
  
  module.exports = {
    target: 'node',
    entry: './server.js',
    output: {
      filename: 'server.bundle.js',
      path: path.resolve(__dirname, 'dist')
    },
    externals: [nodeExternals()],
    module: {
      rules: [
        {
          test: /\.jsx?$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-react', '@babel/preset-env']
            }
          }
        }
      ]
    }
  };
  

• 客户端打包配置（webpack.client.config.js）：

  const path = require('path');
  
  module.exports = {
    entry: './src/client.js',
    output: {
      filename: 'client.bundle.js',
      path: path.resolve(__dirname, 'dist')
    },
    module: {
      rules: [
        {
          test: /\.jsx?$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-react', '@babel/preset-env']
            }
          }
        }
      ]
    }
  };
  

4. 调整客户端入口（src/client.js） #

import React from 'react';
import { hydrateRoot } from 'react-dom/client';
import App from './App';
import { HelmetProvider } from 'react-helmet-async';

const root = document.getElementById('root');
// React 18使用hydrateRoot替代原hydrate方法
hydrateRoot(
  root,
  <HelmetProvider>
    <App />
  </HelmetProvider>
);

5. 添加打包脚本 #

在package.json中添加：

"scripts": {
  "build:client": "webpack --config webpack.client.config.js",
  "build:server": "webpack --config webpack.server.config.js",
  "build": "npm run build:client && npm run build:server",
  "start": "node dist/server.bundle.js"
}

6. 测试运行 #

执行npm run build完成打包，再运行npm start启动服务，访问页面查看源码，确认Meta标签已正确渲染在HTML头部。

关键注意事项 #

• React 18中推荐使用react-helmet-async而非react-helmet，后者在SSR环境下存在状态污染问题，无法适配并发渲染特性。
• 若追求更好的首屏性能，可将renderToString替换为React 18新增的renderToPipeableStream实现流式SSR。
• 自定义SSR时需确保所有路由都能被服务端正确捕获并返回对应HTML。

内容的提问来源于stack exchange，提问作者Srinu Guntamukkala