外观
React 服务端渲染解决什么?
服务端先根据请求把组件渲染成 HTML,浏览器能更快看到内容,也让不执行 JavaScript 的客户端拿到正文。交互还是要等客户端把事件绑上,这一步叫注水。
原理
纯客户端渲染的首屏是一个空节点,等 JS 下载并执行后才有内容。SSR 把这段等待换成服务器计算和传输 HTML。LCP 元素如果在这份 HTML 里,绘制可以更早。
注水要求服务器产出的结构和客户端第一次渲染一致。用了 window、随机数或本地时间却没有分支,两边 HTML 对不上,客户端会丢掉服务器的 DOM 重绘。只在客户端可用的逻辑放进 useEffect。
框架(Next.js 等)把数据获取、路由和打包接在一起。手写 renderToString 可以讲原理,生产还要处理路由、数据预取、样式和缓存。能按页面缓存的 HTML 不要每次请求都现算。
流式渲染可以先把已准备好的 HTML 送出去,慢的数据用占位随后补上。这要求错误边界把慢或失败的块圈起来,不要让一块数据拖住整页。
追问
和 SSG 的差别?
SSG 在构建时生成 HTML,适合内容不跟用户变的页面。SSR 在请求时生成,适合跟登录态或实时数据相关的首屏。纯客户端渲染适合登录后的工具台,首屏 SEO 不重要。
SSR 就一定更快吗?
服务器计算和 TTFB 会变长。数据很慢时,用户白屏只是从浏览器换到了等服务器。先量 TTFB 和 LCP,再决定哪一页值得渲染。
易错点
- 服务器和客户端渲染结果不一致,出现注水警告后整页重绘。
- 在服务器渲染路径里访问
localStorage或window。 - 把所有页面都 SSR,缓存和服务器成本没有设计。