构建支持SSR的React应用教程

想要构建高性能、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应用，核心在于让组件既能在服务端生成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();
  res.send(`
    
    
      
      
${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();

res.send(`
  ...
  
`);

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

以上就是《构建支持SSR的React应用教程》的详细内容，更多关于的资料请关注golang学习网公众号！