流式渲染 (Streaming)

⚡ 什么是 Streaming？

Streaming（流式渲染）允许服务器逐步发送页面内容，而不是等待所有内容准备好再一次性发送。使用 React 的 Suspense 边界，可以让快速的部分先显示，慢速的部分稍后加载。

核心特性：

使用 React Suspense 实现
逐步发送 HTML 片段
改善首字节时间（TTFB）
提升用户感知性能
自动支持 loading UI

📅 页面开始渲染时间：2025-12-17T09:54:12.778Z

这部分会立即发送给客户端（不等待下面的慢速组件）

📊 Streaming 演示

下面的组件模拟了不同的加载时间。打开 Network 面板，查看 HTML 是如何逐步加载的。

🚀 立即显示的内容

这部分内容会立即渲染并发送，无需等待下面的异步组件。

组件 A（1秒）

加载时间：1000ms

完成时间：2025-12-17T09:54:13.779Z

组件 B（2秒）

加载时间：2000ms

完成时间：2025-12-17T09:54:14.779Z

组件 C（3秒）

加载时间：3000ms

完成时间：2025-12-17T09:54:15.779Z

🧪 如何验证 Streaming？

打开 Network 面板：
过滤 "Doc" 类型，找到页面请求
查看响应：
在 Preview 或 Response 标签中，可以看到 HTML 是分块发送的
- 首先发送页面头部和立即显示的内容
- 然后逐步发送 Suspense 组件的内容
观察加载顺序：
刷新页面，会看到：
1️⃣ 页面头部立即显示
2️⃣ 显示 3 个 loading 骨架屏
3️⃣ 1 秒后，组件 A 完成（替换骨架屏）
4️⃣ 2 秒后，组件 B 完成
5️⃣ 3 秒后，组件 C 完成
查看终端日志：
组件按顺序完成，每个组件完成时都会打印日志

💡 适用场景

✅ 适合

复杂仪表盘（多个数据源）
电商产品页（评论、推荐分开加载）
社交媒体（Feed 流）
数据可视化页面
包含慢速 API 的页面

⚠️ 注意

需要设计好 loading 状态
SEO：爬虫可能不等待流式完成
增加复杂度（Suspense 边界）
可能影响布局稳定性（CLS）

💻 代码示例

// app/dashboard/page.tsx
import { Suspense } from 'react';

async function SlowComponent() {
  const data = await fetchSlowData(); // 慢速 API
  return <div>{data}</div>;
}

function LoadingUI() {
  return <div className="animate-pulse">Loading...</div>;
}

export default function Dashboard() {
  return (
    <div>
      {/* 立即显示的内容 */}
      <h1>Dashboard</h1>
      
      {/* 使用 Suspense 包裹慢速组件 */}
      <Suspense fallback={<LoadingUI />}>
        <SlowComponent />
      </Suspense>
      
      {/* 多个 Suspense 边界，独立加载 */}
      <div className="grid">
        <Suspense fallback={<LoadingUI />}>
          <Stats />
        </Suspense>
        
        <Suspense fallback={<LoadingUI />}>
          <Chart />
        </Suspense>
      </div>
    </div>
  );
}