如何为现有React应用的单个组件添加Node.js+Express服务端渲染？

一、基础依赖准备 #

确保现有项目安装必要工具，让Node.js能解析React的JSX语法：

npm install @babel/register @babel/preset-react @babel/preset-env --save-dev

二、单个组件的SSR落地步骤 #

1. 创建待渲染的React组件 #

在项目中新增一个仅用于服务端渲染的组件，比如src/ServerRenderedComponent.jsx：

import React from 'react';

const ServerRenderedComponent = ({ message }) => {
  return (
    <div className="server-rendered">
      <h1>{message}</h1>
      <p>这是一个仅在服务端生成HTML的组件</p>
    </div>
  );
};

export default ServerRenderedComponent;

2. 配置Express路由处理SSR #

在你的Express主文件（如server.js）中添加SSR逻辑，不影响原有应用路由：

// 顶部引入babel注册，让Node能解析JSX
require('@babel/register')({
  presets: ['@babel/preset-react', '@babel/preset-env'],
  extensions: ['.jsx', '.js']
});

const express = require('express');
const React = require('react');
const ReactDOMServer = require('react-dom/server');
const ServerRenderedComponent = require('./src/ServerRenderedComponent').default;
const path = require('path');

const app = express();

// 保留原有静态文件服务（对应React打包后的资源）
app.use(express.static(path.join(__dirname, 'build')));

// 新增SSR专属路由，渲染单个组件
app.get('/ssr-component', (req, res) => {
  // 传入组件所需的props
  const props = { message: '来自服务端的渲染内容' };
  // 将组件渲染为HTML字符串
  const componentHtml = ReactDOMServer.renderToString(
    React.createElement(ServerRenderedComponent, props)
  );

  // 复用现有React应用的HTML模板，替换组件位置
  const fullPage = `
    <!DOCTYPE html>
    <html lang="zh-CN">
      <head>
        <meta charset="UTF-8">
        <title>SSR组件示例</title>
        <link rel="stylesheet" href="/static/css/main.css">
      </head>
      <body>
        <div id="root">${componentHtml}</div>
        <!-- 保留原有客户端JS，可选做hydrate实现交互 -->
        <script src="/static/js/main.js"></script>
      </body>
    </html>
  `;

  res.send(fullPage);
});

// 保留原有应用的兜底路由
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

const PORT = process.env.PORT || 3001;
app.listen(PORT, () => {
  console.log(`服务运行在端口 ${PORT}`);
});

3. 客户端Hydrate（可选） #

如果需要让SSR组件在客户端具备交互性，修改客户端入口文件（如src/index.js）：

import React from 'react';
import ReactDOM from 'react-dom/client';
import ServerRenderedComponent from './ServerRenderedComponent';
import App from './App';

const rootElement = document.getElementById('root');
const root = ReactDOM.createRoot(rootElement);

// 判断是否是服务端渲染的内容，是的话用hydrate复用DOM
if (rootElement.innerHTML.trim()) {
  root.hydrateRoot(
    <ServerRenderedComponent message="来自服务端的渲染内容" />
  );
} else {
  // 原有客户端渲染逻辑
  root.render(<App />);
}

三、后端/服务域名配置 #

1. 本地开发环境 #

• 修改本地hosts文件：
  • Windows路径：C:\Windows\System32\drivers\etc\hosts
  • Mac/Linux路径：/etc/hosts
    添加映射规则：

  127.0.0.1  my-custom-domain.com
  

• 若要去掉端口号，可用Nginx做反向代理，本地配置示例：

  server {
    listen 80;
    server_name my-custom-domain.com;
  
    location / {
      proxy_pass http://localhost:3001;
      proxy_set_header Host $host;
    }
  }
  

  配置完成后，访问my-custom-domain.com即可直达服务。

2. 生产环境 #

• 在域名服务商后台，将域名通过A记录解析到你的服务器公网IP；
• 用Nginx做反向代理，同时配置SSL证书（推荐Let's Encrypt免费证书），示例配置：

  # 强制跳转HTTPS
  server {
    listen 80;
    server_name my-custom-domain.com;
    return 301 https://$host$request_uri;
  }
  
  server {
    listen 443 ssl;
    server_name my-custom-domain.com;
  
    ssl_certificate /usr/local/nginx/ssl/cert.pem;
    ssl_certificate_key /usr/local/nginx/ssl/key.pem;
  
    location / {
      proxy_pass http://localhost:3001;
      proxy_set_header Host $host;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header X-Forwarded-Proto $scheme;
    }
  }
  

• 用PM2管理Node进程，保障服务稳定：

  pm2 start server.js --name "react-ssr-service"
  

四、关键注意事项 #

• 服务端渲染的组件中，禁止直接使用window、document等浏览器专属API，如需使用，需放在useEffect或componentDidMount等仅客户端执行的生命周期中；
• 测试SSR是否成功：打开页面源代码，若能看到组件的完整HTML结构，说明渲染生效；
• 后续扩展时，可将SSR逻辑抽离为Express中间件，方便快速添加更多组件的SSR支持。

内容的提问来源于stack exchange，提问作者Wouter Lemcke