首页 > 文章 > 前端

构建支持SSR的React应用教程

时间：2025-10-16 18:27:38 208浏览收藏

**React SSR全攻略：构建高性能服务端渲染应用，优化SEO！** 想要提升React应用的SEO和首屏加载速度？服务端渲染(SSR)是关键！本文将深入解析如何构建一个支持SSR的React应用。核心步骤包括：利用Node.js服务器，通过`renderToString`在服务端生成HTML，并在客户端使用`hydrateRoot`激活页面交互。同时，讲解如何使用`StaticRouter`实现服务端路由匹配，以及如何预取数据并通过`__INITIAL_STATE__`实现服务端与客户端的状态同步。掌握这些关键技术，让你的React应用拥有更佳的用户体验和搜索引擎表现。了解更多React SSR的实践技巧，立即开始你的SSR之旅！

答案：构建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节点，绑定事件监听器

客户端代码示例：

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应用教程》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！