React SSR同构渲染方案是什么？

一、背景

目前主流的前端架构分为SSR、CSR、SSG，比较适合首屏直出的方案除了CSR都还不错，因为服务端会直接返回路由对应的html + css，浏览器直接解析DOM即可，而水合的作用是什么？服务端首次返回的是静态页面，页面需要”动“起来的话，则需要水合，即将页面所需的JS引入并加载、给DOM绑定交互等等，核心的API即ReactDOM.hydrateRoot。

二、同构渲染

这样服务端渲染一次、客户端渲染一次的流程也称为同构渲染，一般情况是通过Nodejs实现文件服务，基于组件文件通过React Server API——renderToString，就像这样：

import { renderToString } from 'react-dom/server';
import App from './App';console.log(renderToString(<App/>));

而在客户端接收到服务端渲染所生成的html string后，基于客户端水合API——react DOM API——hydrateRoot进行组件与静态标签的关联，就像这样：

import React from 'react';
import { hydrateRoot } from 'react-dom/client';
import './index.css';
import App from './App';hydrateRoot(document.getElementById('root'), <App/>);

三、手写一个SSR

基于同构渲染的秘密，我们解开了，那手写一个基础的SSR服务其实很简单，我们可以把整个加载链路拆解成三步：

起一个本地express服务，用于按路由返回html；
前端构建时约定式路由/pages，解析每个路由下的根组件；生成html模板；
webpack构建工程代码，产出bundle.js；
前端项目中引入bundle.js，进行同构渲染水合逻辑；

整体的项目工程如下：

├── .next    // 生成文件服务html、构建结果
├── src
│ ├── pages // 页面
│ │ ├── a.jsx // 页面A
│ │ ├── b.jsx // 页面B
│ │ ├── c.jsx // 页面C
│ ├── client.js // 水合
├── generateHtml.js // 路由转换html能力
├── server.js // 文件服务
├── teamplate.html // html基础模板
├── webpack.config.js
└── package.json

3.1、文件服务搭建

我们起一个简单的工程项目，并安装基础依赖。

mkdir ssr-demo
cd ssr-demo
npm init -y
npm i express react react-dom webpack webpack-cli fs-extra

express服务代码如下：

const express = require("express");
const path = require("path");// 定义根目录
const rootDir = path.resolve(__dirname, "./");
const outputDir = path.join(rootDir, ".next");const app = express();
const PORT = process.env.PORT || 3000;// 提供 .next 目录的静态文件服务
app.use(express.static(outputDir));// 启动服务器
app.listen(PORT, () => {console.log(`Server is running on http://localhost:${PORT}`);
});

代码中启用了静态文件服务，在路由解析服务实现后，每次项目构建阶段都会在.nest路由生成所有页面的html，用于在服务端直接返回。

3.2、路由解析服务

接下来我们实现服务端核心部分，将所有路由的组件解析成html模板，在此之前需要有一个基础的html模板，用于动态插入组件部分的标签，html模板如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>My App</title></head><body data-component="{{componentName}}">{{content}}<script src="/client.bundle.js" defer></script></body>
</html>

其中content是实际渲染的组件标签、componentName用于在后续水合阶段定位组件、script用于执行水合逻辑。

遍历生成所有html文件的代码如下：

// src/generate.js
require("@babel/register")({presets: ["@babel/preset-env", "@babel/preset-react"],
});const fs = require("fs-extra"); // 使用 fs-extra 方便处理文件
const path = require("path");
const React = require("react");
const ReactDOMServer = require("react-dom/server");// 定义根目录
const rootDir = path.resolve(__dirname, "./");
const pagesDir = path.join(rootDir, "src/pages");
const outputDir = path.join(rootDir, ".next");// 生成 HTML 文件
const generateHtmlFiles = () => {return new Promise((resolve, reject) => {fs.readdir(pagesDir, (err, files) => {if (err) {reject("Error reading pages directory");return;}const promises = files.map((file) => {const filePath = path.join(pagesDir, file);const fileExt = path.extname(file);// 只处理以 .jsx 结尾的文件if (fileExt === ".jsx") {const pageName = path.basename(file, fileExt);const PageComponent = require(filePath).default; // 导入组件const renderedContent = ReactDOMServer.renderToString(React.createElement(PageComponent));const templatePath = path.resolve(__dirname, "template.html"); // Load HTML templatereturn new Promise((resolve, reject) => {fs.readFile(templatePath, "utf8", (err, template) => {if (err) {console.error("Error loading template:", err);reject(err);return;}const html = template.replace("{{content}}", renderedContent).replaceAll("{{componentName}}", pageName); // 注入组件名称// 构造输出路径，放在以页面名字为名的文件夹中const outputDirForPage = path.join(outputDir, pageName);const outputFilePath = path.join(outputDirForPage, "index.html");fs.ensureDirSync(outputDirForPage); // 确保页面目录存在fs.outputFileSync(outputFilePath, html, "utf8");console.log(`Generated HTML for ${pageName}: ${outputFilePath}`);resolve();});});}return Promise.resolve(); // 对于不是 .jsx 文件的情况});Promise.all(promises).then(() => resolve("HTML generation completed!")).catch(reject); // 处理生成过程中的异常});});
};// 直接调用生成函数并输出结果
generateHtmlFiles().then((message) => {console.log(message);process.exit(0); // 结束进程}).catch((err) => {console.error(err);process.exit(1); // 发生错误，结束进程});

3.3、webpack打包前端工程

这里比较好理解，整个前端客户端代码也需要打包，包括水合的代码，我们基于webpack构建，初始化一个基础的打包配置：

const path = require("path");module.exports = {entry: path.resolve(__dirname, 'src', 'client.js'),output: {path: path.resolve(__dirname, ".next"), // 输出到 .next 目录filename: "client.bundle.js", // 根据入口名称生成文件名publicPath: "/", // 公开路径},module: {rules: [{test: /\.(js|jsx)$/,exclude: /node_modules/,use: {loader: "babel-loader",options: {presets: ["@babel/preset-env", "@babel/preset-react"],},},},],},resolve: {extensions: [".js", ".jsx"],},mode: "production", // 可以根据需要设置为 'development'
};

配置完webpack之后，我们前三步的流程可以串起来了，这个效果和webpack dev server比较类似，我们基于流程顺序，配置对应的package.json scripts：

  "scripts": {"build": "webpack --config webpack.config.js","generate": "node generateHtml.js","server": "node server.js","start": "npm run build && npm run generate && npm run server"},

build负责构建前端工程；
generate负责生成所有页面的html；
server负责创建最终的文件服务；

3.4、渲染的终点——水合

这段代码运行时，服务端已经返回html文件，此时是同构渲染的终点，通过hydrateRoot API将服务端的标签在浏览器水合，让页面组件动起来即可。

实现代码：

// // src/client.js
import React from "react";
import ReactDOM from "react-dom/client";console.log(React);
const hydrateComponent = (componentName) => {// 动态 import 组件import(`./pages/${componentName}.jsx`).then(({ default: Component }) => {const domContainer = document.getElementById(componentName);if (domContainer) {ReactDOM.hydrateRoot(<Component />, domContainer);} else {console.error(`No container found for component ${componentName}`);}}).catch((error) => {console.error("Error loading component:", error);});
};// 从 HTML 中提取组件名称，然后进行水合
document.addEventListener("DOMContentLoaded", () => {const componentName = document.body.getAttribute("data-component");hydrateComponent(componentName);
});