如何构建一个支持SSR（服务端渲染）的React应用？-js教程-PHP中文网

如何构建一个支持SSR（服务端渲染）的React应用？

紅蓮之龍

发布： 2025-10-03 15:51:02

原创

914人浏览过

答案：构建SSR应用需在服务端用renderToString生成HTML，客户端用hydrateRoot激活交互，通过StaticRouter实现服务端路由匹配，并预取数据注入__INITIAL_STATE__实现状态同步。

如何构建一个支持ssr（服务端渲染）的react应用？

要构建一个支持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(<App />);
  res.send(`
    <!DOCTYPE html>
    <html>
      <head><title>SSR App</title></head>
      <body><div id="root">${html}</div>
        <script src="client.js"></script>
      </body>
    </html>
  `);
});

登录后复制

2. 客户端启用hydrate激活页面

服务端渲染只生成静态HTML，必须在客户端通过hydrate使组件具备交互能力。

• 在客户端入口文件中，使用 hydrateRoot 而不是 createRoot
• 确保客户端挂载的目标元素ID与服务端一致（如 #root）
• hydrate会复用已有的DOM节点，绑定事件监听器

客户端代码示例：

AppMall应用商店

AI应用商店，提供即时交付、按需付费的人工智能应用服务

查看详情

import { hydrateRoot } from 'react-dom/client';
import App from './App';

hydrateRoot(document.getElementById('root'), <App />);

登录后复制

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(
  <StaticRouter location={req.url}>
    <App />
  </StaticRouter>
);

登录后复制

4. 数据预取与状态同步

服务端渲染常需要先获取数据再输出HTML，否则会出现内容闪烁。

• 在组件设计上支持异步数据加载（如自定义loadData函数）
• 服务端等待数据获取完成后再执行renderToString
• 将初始状态序列化后注入window.__INITIAL_STATE__，供客户端复用

简单实现方式：

// 服务端
const preloadedState = await fetchSomeData();
const html = renderToString(<App initialData={preloadedState} />);

res.send(`
  ...
  <script>
    window.__INITIAL_STATE__ = ${JSON.stringify(preloadedState)}
  </script>
`);

登录后复制

基本上就这些。只要把握住服务端生成HTML、客户端hydrate、路由匹配和数据同步这几个关键环节，就能搭建出一个基本可用的SSR应用。实际项目中可考虑使用Next.js来简化流程。

以上就是如何构建一个支持SSR（服务端渲染）的React应用？的详细内容，更多请关注php中文网其它相关文章！