Skip to content

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,缓存和服务器成本没有设计。

相关 ​