架构设计：同构渲染的核心价值

同构渲染（Isomorphic Rendering）的核心在于统一服务端与客户端的渲染逻辑，使同一套React组件既能运行在Node.js服务端生成初始HTML，也能在浏览器端接管后续交互。这种架构的优势体现在三方面：

SEO优化：服务端渲染的HTML可直接被搜索引擎抓取，解决纯客户端渲染的SEO痛点；
首屏加速：用户无需等待JavaScript下载与执行即可看到内容，尤其适合弱网环境；
代码复用：前后端共享同一套组件逻辑，减少维护成本。

在技术选型上，Express作为轻量级Node.js框架，提供灵活的路由与中间件机制，与React的JSX语法和虚拟DOM特性高度兼容。两者结合可构建高性能的同构应用。

实现步骤：从零搭建同构环境

1. 环境初始化与依赖安装

首先创建项目目录并初始化npm：

mkdir isomorphic-react-express && cd isomorphic-react-express
npm init -y

安装核心依赖：

npm install express react react-dom @babel/core @babel/preset-env @babel/preset-react babel-loader webpack webpack-cli webpack-node-externals --save-dev

关键依赖说明：

react与react-dom：React核心库；
@babel/preset-react：支持JSX语法转换；
webpack-node-externals：排除node_modules，避免服务端打包体积过大。

2. 配置Webpack：分离服务端与客户端构建

创建webpack.config.js，定义两个配置对象：

const nodeExternals = require('webpack-node-externals');
module.exports = [
  // 服务端配置
  {
    entry: './src/server.js',
    target: 'node',
    externals: [nodeExternals()],
    output: {
      path: __dirname + '/dist',
      filename: 'server.bundle.js'
    },
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: { loader: 'babel-loader' }
        }
      ]
    }
  },
  // 客户端配置
  {
    entry: './src/client.js',
    target: 'web',
    output: {
      path: __dirname + '/dist/public',
      filename: 'client.bundle.js'
    },
    module: {
      rules: [{ test: /\.js$/, use: 'babel-loader' }]
    }
  }
];

服务端配置需设置target: 'node'并排除node_modules，客户端配置则直接输出到public目录供Express静态资源服务使用。

3. 编写同构组件与渲染逻辑

创建src/components/App.js作为根组件：

import React from 'react';
const App = () => <h1>Isomorphic React App</h1>;
export default App;

服务端入口src/server.js实现渲染逻辑：

import express from 'express';
import React from 'react';
import { renderToString } from 'react-dom/server';
import App from './components/App';
const app = express();
app.use(express.static('dist/public'));
app.get('*', (req, res) => {
  const html = renderToString(<App />);
  res.send(`
    <!DOCTYPE html>
    <html>
      <head><title>Isomorphic App</title></head>
      <body>
        <div id="root">${html}</div>
        <script src="/client.bundle.js"></script>
      </body>
    </html>
  `);
});
app.listen(3000, () => console.log('Server running on port 3000'));

客户端入口src/client.js接管交互：

import React from 'react';
import { hydrate } from 'react-dom';
import App from './components/App';
hydrate(<App />, document.getElementById('root'));

关键点：服务端使用renderToString生成静态HTML，客户端使用hydrate复用服务端DOM结构并绑定事件。

性能优化与最佳实践

1. 数据预取策略

服务端渲染需解决数据依赖问题。推荐使用以下模式：

// src/utils/fetchData.js
export const fetchData = async (url) => {
  const res = await fetch(url);
  return res.json();
};
// 服务端路由处理
app.get('*', async (req, res) => {
  const data = await fetchData('/api/data');
  const html = renderToString(<App initialData={data} />);
  // 传递数据到客户端
  res.send(`
    <script>window.__INITIAL_DATA__ = ${JSON.stringify(data)}</script>
    <div id="root">${html}</div>
    <script src="/client.bundle.js"></script>
  `);
});

客户端通过window.__INITIAL_DATA__复用数据，避免重复请求。

2. 代码分割与按需加载

使用动态import()实现路由级代码分割：

// 客户端路由配置
const Home = React.lazy(() => import('./components/Home'));
const About = React.lazy(() => import('./components/About'));
function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <Route path="/" exact component={Home} />
      <Route path="/about" component={About} />
    </Suspense>
  );
}

服务端需配合@loadable/server处理动态导入，确保服务端与客户端打包一致。

3. 缓存与CDN加速

静态资源缓存：设置Cache-Control头，对client.bundle.js启用长期缓存；
服务端渲染缓存：对无个性化数据的页面，使用Redis缓存渲染结果；
CDN部署：将客户端资源部署至CDN，减少服务器负载。

常见问题与解决方案

1. 浏览器与服务端环境差异

部分API（如window、localStorage）在服务端不可用。解决方案：

// 动态判断运行环境
const isBrowser = typeof window !== 'undefined';
if (isBrowser) {
  // 仅客户端执行的代码
}

或使用react-helmet等库管理文档头信息，避免直接操作document。

2. 样式处理

推荐使用CSS-in-JS方案（如styled-components）或同构CSS工具（如isomorphic-style-loader），确保服务端与客户端样式一致。

3. 状态管理

对于复杂应用，集成Redux或MobX实现状态同构：

// 服务端创建Store并填充初始状态
const store = createStore(reducer, initialData);
const html = renderToString(
  <Provider store={store}>
    <App />
  </Provider>
);

客户端复用相同Store结构，避免状态闪烁。

总结与展望

React与Express的同构渲染通过统一代码库、优化首屏体验与SEO，成为现代Web开发的优选方案。实际项目中需重点关注数据预取、环境差异处理与性能优化。随着服务端渲染框架（如Next.js）的成熟，开发者可基于本文原理进一步探索自动化同构解决方案，平衡开发效率与运行性能。

React与Express结合：实现服务端与客户端同构渲染