答案：构建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(` 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();res.send(` ... window.__INITIAL_STATE__ = ${JSON.stringify(preloadedState)} `);
基本上就这些。只要把握住服务端生成HTML、客户端hydrate、路由匹配和数据同步这几个关键环节，就能搭建出一个基本可用的SSR应用。实际项目中可考虑使用Next.js来简化流程。
以上就是如何构建一个支持SSR（服务端渲染）的React应用？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1525956.html
微信扫一扫 
支付宝扫一扫 
