SSR 原理与实践
最新回答
相逢即是缘分
2026-05-27 14:52:50
对比双端渲染方式，SSR可减少服务器压力。若页面不需要SSR，则在服务端渲染时返回最小DOM结构，双端对比后采用CSR内容，实现优化。
流式渲染技术利用renderToPipeableStream实现内容渐进式传输，无需等待整个DOM树渲染完成。这在任何script标签加载前开始显示内容，提高用户体验。
在渲染过程中，Shell内容即Suspense组件外的所有内容，会用template标签作为占位符。当内容渲染完成，一并传输至浏览器，此时Shell内容不再更改。
通过StaticRouter实现路由同构，服务端和客户端共享路由逻辑，不依赖浏览器，通过location属性判断当前路由，选取对应页面。
数据同构确保服务端渲染与客户端初始渲染使用相同数据，解决数据异步问题。引入同时支持两种环境的请求库如axios，预取数据并传入组件props。
组件getInitialProps方法用于数据预取，挂载到props.initialData。相关属性命名无特殊含义，形成约定即可。
数据预取结果通过StaticRouter的context传递或使用React、redux等上下文方案。前端数据脱水后，HTML模板仅短暂显示，需将数据与HTML一同发送。
客户端通过script标签、window对象或textarea标签等方法注入数据，实现数据注水。这确保了双端渲染时数据的正确使用。
TDK信息优化SEO，若固定，直接写入HTML模板；动态生成则在数据预取时固定字段。使用react-helmet方便实现双端同构，前端通过Helmet设置TDK信息，后端调用Helmet.renderStatic获取数据。
在渲染前存储前端数据，通过Helmet组件自动设置TDK信息，无需手动修改DOM。renderStatic需在renderToString之后调用，内部存储Helmet组件内的TDK信息。
热门标签
