Suspense 与流式 SSR：让首屏快起来

首屏速度的敌人之一，是「等所有数据都就绪才开始输出 HTML」。流式 SSR 配合 Suspense，正是为了解决这个问题。

传统 SSR 的瓶颈

传统 SSR 是「全量渲染」：服务端必须等所有数据请求完成，才把完整 HTML 一次性返回。任何一个慢接口都会拖慢整个页面，即便其他部分早已准备好。

Suspense 的服务端能力

Suspense 在服务端的作用是声明边界：告诉框架「这部分内容可以稍后提供」。

<Suspense fallback={<Spinner />}>
  <SlowComponent />  {/* 依赖慢接口 */}
</Suspense>

服务端会先渲染不依赖慢数据的部分，对 Suspense 包裹的部分，先输出 fallback，数据就绪后再「流式」补上。

流式输出的机制

借助 HTTP 流，服务端可以：

1. 立即输出页面骨架与已就绪内容；
2. 数据到达后，继续输出对应片段；
3. 浏览器边接收边渲染，用户更早看到首屏。

这大幅改善了 TTFB（首字节时间） 与 LCP（最大内容绘制） 的感知。

关键实践

• 按内容重要性划分 Suspense 边界：把首屏关键内容优先，非关键模块延迟；
• 结合 RSC：服务端组件天然支持流式，配合 Suspense 效果更佳；
• 避免过度嵌套：过多边界会增加复杂度，按「慢数据」的自然分界划分即可。

结语

流式 SSR 的本质，是把「串行的等待」变成「并行的输出」。理解了 Suspense 的声明式边界，你就掌握了现代 React 性能优化里最优雅的一块拼图。