答案：构建SSR应用需在服务端用renderToString生成HTML，客户端用hydrateRoot激活交互，通过StaticRouter实现服务端路由匹配，并预取数据注入__INITIAL_STATE__实现状态同步。
要构建一个支持SSR（服务端渲染）的React应用，核心在于让组件既能在服务端生成HTML字符串，又能在客户端正确“注水”（hydrate），保持交互性。关键点是使用Node.js服务器配合React的 renderToString 和 hydrateRoot 方法，并确保两端路由和状态同步。
1. 搭建基础服务端入口
创建一个基于Express或Koa的Node.js服务器，在请求到来时调用React进行渲染。
• 使用 react-dom/server 中的 renderToString 将React组件转换为HTML字符串• 将生成的HTML嵌入到完整的页面模板中，包含必要的script标签
• 返回拼接后的HTML响应给客户端
示例代码片段：
import { renderToString } from 'react-dom/server';
import App from './App';
app.get('*', (req, res) => {
const html = renderToString(SSR App
${html}
`);
});
2. 客户端启用hydrate激活页面
服务端渲染只生成静态HTML，必须在客户端通过hydrate使组件具备交互能力。
• 在客户端入口文件中，使用 hydrateRoot 而不是 createRoot• 确保客户端挂载的目标元素ID与服务端一致（如 #root）
• hydrate会复用已有的DOM节点，绑定事件监听器
客户端代码示例：
import { hydrateRoot } from 'react-dom/client';
import App from './App';
hydrateRoot(document.getElementById('root'),
3. 处理路由和服务端匹配
如果使用React Router，服务端需根据请求URL匹配对应路由，避免返回首页内容。
• 使用 StaticRouter 替代 BrowserRouter 在服务端运行• 传入当前请求路径（req.url）作为location信息
• 结合 useRoutes 或 Routes/Route 实现动态匹配
服务端路由处理示意：
import { StaticRouter } from 'react-router-dom/server';
import { useRoutes } from 'react-router-dom';
import routes from './routes';
function App() {
return useRoutes(routes);
}
// 服务端渲染时
const html = renderToString(
);
4. 数据预取与状态同步
服务端渲染常需要先获取数据再输出HTML，否则会出现内容闪烁。
• 在组件设计上支持异步数据加载（如自定义loadData函数）• 服务端等待数据获取完成后再执行renderToString
• 将初始状态序列化后注入window.__INITIAL_STATE__，供客户端复用
简单实现方式：
// 服务端 const preloadedState = await fetchSomeData(); const html = renderToString(基本上就这些。只要把握住服务端生成HTML、客户端hydrate、路由匹配和数据同步这几个关键环节，就能搭建出一个基本可用的SSR应用。实际项目中可考虑使用Next.js来简化流程。); res.send(` ... `);
