衡量流式传输的影响：FCP、TTI 与 LCP

FCP 衡量从导航开始到第一块内容（文本、图像或背景）绘制到屏幕上的时间。流式传输会通过立即发送 HTML 外壳来改善 FCP——浏览器在收到首批数据块后，就能绘制布局、导航和任何首屏文本。

使用同步 SSR（renderToString）时，浏览器在整个渲染完成前不会收到任何 HTML。使用流式传输时，浏览器会在请求发出后的几毫秒内收到 HTML 外壳——布局和静态内容几乎立即显示，从而大幅缩短 FCP。

LCP 衡量视口中最大的可见元素完成绘制的时间——通常是主视觉图片或大标题。如果 LCP 元素属于外壳（不在 Suspense 边界内），流式传输会改善 LCP，因为外壳会先于任何依赖数据的部分进行传输。

关键优化是设计页面，使 LCP 元素——主视觉区域、主标题、特色图片——位于所有 Suspense 边界之外。如果 LCP 元素位于等待数据的 Suspense 边界内，那么在数据解析完成之前，流式传输无法改善 LCP。

TTI 衡量页面能够可靠响应用户输入的时间——主线程没有被长任务阻塞。流式传输结合选择性水合后，会将水合工作分散到一段时间内，而不是在所有 JavaScript 下载完成后执行一个大型同步水合任务，从而缩短 TTI。

首字节时间（TTFB）由网络延迟以及发送首个字节前的服务器处理时间决定。流式传输不会改变 TTFB——这正是边缘渲染可以发挥作用的地方。要让流式传输改善 FCP，首先需要较低的 TTFB；否则，您只是在从缓慢的源站进行流式传输。

WebPageTest 的胶片条视图会显示页面加载期间每隔 100 毫秒截取的一系列屏幕截图。流式渲染的页面会较早显示布局，随后各个部分逐步填充。非流式渲染的页面则先显示空白屏幕，接着突然出现完整渲染的页面——视觉差异十分明显。

有意义的基准测试应比较同一页面以两种方式渲染的结果：启用 Next.js RSC 流式渲染与传统同步 SSR。使用固定网络条件（例如 Fast 3G、4 倍 CPU 降速）运行 WebPageTest，并在 3 次测试运行中比较 FCP、LCP 和 TTI 指标，以获得统计上的可信度。

Chrome DevTools 的网络选项卡有一个“限速”下拉菜单，其中包含 Fast 3G 和 Slow 4G 等预设。Fast 3G（1.6 Mbps、150ms RTT）会放大流式渲染与非流式渲染之间的差异，因为它会延长完整 HTML 文档的下载时间，使增量流式渲染带来的收益变得明显。

交互到下一次绘制（INP）衡量从任意用户交互到下一次绘制所需的时间。它在 2024 年取代 FID，成为核心网页指标。流式渲染会优先对用户可能首先交互的组件进行水合，从而减少这些组件变得可响应之前的阻塞时间，降低 INP。

影响最大的配置是将边缘渲染（来自附近 PoP 的低 TTFB）与流式渲染（渐进式 HTML 传输）和选择性水合（渐进式 JS 处理）结合起来。这三种技术共同作用，可以最大限度地降低整个加载生命周期中的所有主要性能指标。

流式渲染最直接改善 FCP，因为它会立即传送 HTML 外壳；当 LCP 元素位于外壳中时，也会改善 LCP。选择性水合将 JS 工作分散到一段时间内，从而改善 TTI。TTFB 不会改变——应通过边缘渲染处理。使用 WebPageTest 胶片条视图和 Chrome DevTools 限速来衡量流式渲染的影响，并将 INP 作为核心网页指标中主要的交互性指标进行优化。