全书目录

第五篇：Next.js 完全指南 —— 商业综合体宇宙

第六章：Streaming —— 别让顾客站在门口等整栋楼装修完

1 分钟 202 字 第 117 / 962 个阅读单元

Next.js 很强调 流式渲染。
意思不是“整页都准备好了再一次性端出来”，而是：

  • 先把能展示的部分先送到浏览器
  • 慢的部分后到
  • 用户先看到骨架和结构，再等局部补齐
#1. loading.tsx —— 排队区先开灯
tsx
// app/dashboard/loading.tsx
export default function Loading() {
  return <p>后台数据加载中...</p>;
}

当对应路由段在等待时，loading.tsx 会先顶上。

#2. Suspense —— 给慢区域单独设等候区
tsx
// app/dashboard/page.tsx
import { Suspense } from 'react';

async function RevenuePanel() {
  const res = await fetch('https://example.com/api/revenue');
  const data = await res.json();
  return <section>营收：{data.total}</section>;
}

export default function DashboardPage() {
  return (
    <div>
      <h1>运营看板</h1>

      <Suspense fallback={<p>营收模块加载中...</p>}>
        <RevenuePanel />
      </Suspense>
    </div>
  );
}

这就像综合体的大门已经打开，顾客先能进来逛大厅，某个慢装好的展区晚一点亮灯。