06 · 实验 B

流式渲染 Streaming

用 Suspense 把慢速区块包起来:页面先流式吐出不依赖慢数据的部分,慢内容就绪后再填充。

立即渲染(不等待慢数据)

这部分没有 await,会第一时间出现在页面上。下面两个区块分别延迟 1s / 2s, 但它们不会阻塞本区块

关键认知

  • 流式渲染 = 不用等整页算完再返回。每个 Suspense 边界是"流式填充的节点",慢区块就绪后逐块下发给浏览器。
  • 好处:首屏 TTFB 更快(不用等最慢的那块)、用户先看到骨架/已有内容、感知更快。
  • loading.tsx 本质上就是"整个页面默认包了一层 Suspense"(第 2 章约定文件)。
  • 观察方式:Network 面板把网速调慢,能看到页面先出内容、骨架、再陆续填充。