当前位置：首页 > 文章列表 > 文章 > 前端 > 构建支持SSR的React应用教程

构建支持SSR的React应用教程

2025-10-01 20:55:04 0浏览收藏

想要构建高性能、SEO友好的React应用？服务端渲染（SSR）是关键！本文为你提供一份全面的SSR实战攻略，助你轻松搭建支持服务端渲染的React应用。文章深入讲解了如何利用Node.js服务器，结合`renderToString`和`hydrateRoot`实现服务端HTML生成和客户端激活。同时，详细阐述了如何使用`StaticRouter`在服务端进行路由匹配，确保页面正确渲染。更重要的是，本文还介绍了数据预取和状态同步的最佳实践，通过`__INITIAL_STATE__`避免内容闪烁，提升用户体验。掌握这些核心技术，你就能打造出既能快速加载又能被搜索引擎有效抓取的React应用，或者考虑使用Next.js等框架简化开发流程。

答案：构建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学习网公众号！

CSS多类组合选择器怎么用

上一篇: CSS多类组合选择器怎么用

Word表格边框设为虚线的步骤如下：选中表格：点击表格任意位置，或拖动鼠标选中需要设置边框的单元格。打开边框设置：在菜单栏中找到“开始”选项卡。点击“边框”按钮（通常显示为一个方框图标），然后选择“边框和底纹”。设置边框样式：在弹出的“边框和底纹”窗口中，选择“边框”选项卡。在“样式”下拉菜单中，选择“虚线”。设置颜色和宽度（可选）。应用设置：选择“应用于”为“所选内容”或“整张表格”。点击“确定

下一篇: Word表格边框设为虚线的步骤如下：选中表格：点击表格任意位置，或拖动鼠标选中需要设置边框的单元格。打开边框设置：在菜单栏中找到“开始”选项卡。点击“边框”按钮（通常显示为一个方框图标），然后选择“边框和底纹”。设置边框样式：在弹出的“边框和底纹”窗口中，选择“边框”选项卡。在“样式”下拉菜单中，选择“虚线”。设置颜色和宽度（可选）。应用设置：选择“应用于”为“所选内容”或“整张表格”。点击“确定

查看更多