巧用 React 19 `Use` 提升 TTFB：原理、数据流与实战场景

1
2
3
4

1. 服务端收到请求
2. 执行数据获取（如 fetch 数据库/API）—— 阻塞 2-5 秒
3. 等待数据返回后，渲染组件树生成完整 HTML
4. 将完整 HTML 一次性返回给浏览器

1
2
3
4
5
6
7
8
9

1. 服务端收到请求
2. 在 Server Component 中创建 Promise（但不 await）
3. 将 Promise 作为 props 传递给 Client Component
4. 服务端渲染 Client Component 树，执行 `use(Promise)` 时：
   a. 若 Promise 未 resolve → 抛出 Suspense 异常
   b. React 渲染 fallback（骨架屏）并继续输出后续 HTML
5. 服务端将“包含骨架屏的 HTML 流”立即返回给浏览器 → **TTFB 大幅提前**（具体取决于 shell 中 Suspense 边界之前是否还有其它内容）
6. Promise 在服务端 resolve 后，React 重新渲染该 Suspense 边界内的真实 UI
7. 真实 UI 通过同一个 HTTP 连接流式推送到浏览器

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

┌─────────────────────────────────────────────────────────────────────────────┐
│ 服务端（Next.js Server）                                                    │
│                                                                             │
│  ① 请求进入 → 执行 Server Component                                        │
│  ② const promise = fetchData()  // pending，不 await                       │
│  ③ <Child dataPromise={promise} />                                        │
│  ④ 渲染 Child，调用 use(promise) → 未 resolve → 抛出 Suspense              │
│  ⑤ 输出 fallback HTML → 立即发送 → 【TTFB 完成】                           │
│  ⑥ 后台等待 promise resolve...                                             │
│  ⑦ resolve 后，再次渲染 Child → use(promise) 返回数据 → 生成真实 UI HTML   │
│  ⑧ 将真实 UI HTML 通过流推送到浏览器                                       │
└─────────────────────────────────────────────────────────────────────────────┘
                                    │
                                    ▼ 同一个 HTTP 连接，分块传输
┌─────────────────────────────────────────────────────────────────────────────┐
│ 浏览器                                                                    │
│                                                                             │
│  ⑨ 接收并展示 fallback HTML（骨架屏可见）                                   │
│  ⑩ 接收真实 UI chunk → React 合并流式更新 → 替换 fallback              │
│  ⑪ 水合完成，组件可交互                                                │
└─────────────────────────────────────────────────────────────────────────────┘

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

// app/player/[id]/page.tsx —— Server Component
import { Suspense } from 'react';
import { PlayerCard } from '@/components/PlayerCard';
import { fetchPlayer } from '@/lib/fetchPlayer';

export default function Page({ params }: { params: { id: string } }) {
  // 在服务端创建 Promise，不 await
  const playerPromise = fetchPlayer(params.id);

  return (
    <div>
      <h1>球员档案</h1>
      <Suspense fallback={<div>正在加载球员信息...</div>}>
        <PlayerCard dataPromise={playerPromise} />
      </Suspense>
    </div>
  );
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

// components/PlayerCard.tsx —— Client Component
'use client';
import { use } from 'react';

type Props = {
  dataPromise: Promise<{ name: string; goals: number }>;
};

export function PlayerCard({ dataPromise }: Props) {
  // 消费 Server Component 传入的 Promise，不在 render 里重新 fetch
  const data = use(dataPromise);

  return (
    <div>
      <h2>{data.name}</h2>
      <p>进球数：{data.goals}</p>
    </div>
  );
}