数据获取

这一课你将能做到

1. 在 Server Component 中直接用 fetch 获取数据，并理解其缓存行为
2. 用 revalidate 和 revalidatePath / revalidateTag 控制缓存更新
3. 用 Server Actions 处理表单提交和数据变更
4. 用 loading.tsx 和 <Suspense> 实现数据加载的骨架屏
5. 区分「请求时获取」和「构建时获取」，避免过度渲染

为什么要学

数据获取是 Next.js 的核心战场。传统 React 里你用 useEffect + fetch 或 SWR/React Query，数据在浏览器请求， loading 状态自己管，缓存自己实现。Next.js Server Component 把数据获取挪到服务端：组件直接 await fetch，渲染时数据已经 ready，HTML 里直接带内容。这不仅更快，还解决了「瀑布请求」——组件嵌套时，父组件等子组件的数据，子组件等孙组件的数据，一层层串行请求。

人话：传统方式是「服务员（浏览器）每上一道菜都要跑一次厨房（API）」，Server Component 是「厨房一次性把所有菜做好，服务员一次性端上来」。

先建立图像

传统 React（CSR）:
浏览器请求 → 服务器返回空 HTML + JS → 浏览器执行 JS → 浏览器请求 API → 渲染

Next.js Server Component:
浏览器请求 → 服务器执行组件（内部 fetch）→ 服务器返回完整 HTML → 浏览器直接显示

Server Action:
浏览器提交表单 → POST 到服务器 → 服务器执行 Action → 重新渲染页面返回

关键区别：数据获取发生在服务器渲染期间，不是浏览器渲染之后。

跟着做

步骤 1：Server Component 基础 fetch

app/posts/page.tsx：

async function getPosts() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts?_limit=10');
  if (!res.ok) throw new Error('获取文章失败');
  return res.json();
}

export default async function PostsPage() {
  const posts = await getPosts();

  return (
    <main style={{ padding: 40 }}>
      <h1>文章列表</h1>
      <ul>
        {posts.map((p: any) => (
          <li key={p.id}>{p.title}</li>
        ))}
      </ul>
    </main>
  );
}

查看页面源代码，文章列表已经在 HTML 里——数据在服务器获取，不是浏览器。

步骤 2：缓存控制

Next.js 默认缓存 Server Component 的 fetch。验证方式：连续刷新页面，观察网络面板，第二次请求返回 304 或来自内存缓存。

强制不缓存（SSR 模式）：

async function getPosts() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts', {
    cache: 'no-store',
  });
  return res.json();
}

定时缓存（ISR 模式）：

async function getPosts() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts', {
    next: { revalidate: 3600 }, // 1 小时
  });
  return res.json();
}

按标签缓存，精确刷新：

async function getPosts() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts', {
    next: { tags: ['posts'] },
  });
  return res.json();
}