数据获取与缓存

这一课你将能做到

1. 在 Server Component 里直接 async/await fetch 拉取后端数据并渲染，不再需要 useEffect
2. 说出 Next.js 三层缓存的分工，会配置 revalidate、no-store 与按需失效
3. 把「对接 Spring Boot REST API」的完整取数链路写出来（本站 platform 的真实做法）

为什么要学

老 React 取数据的标准姿势是：组件挂载 → useEffect 发请求 → 三个状态变量（data/loading/error）→ 处理竞态。每个页面重复一遍，代码又长又容易出 bug。

App Router 把这套东西砍了：组件就是 async 函数。

// 过去：useState + useEffect 三件套，20 行
// 现在：
const res = await fetch("http://localhost:8080/api/tracks");
const tracks = await res.json();

数据在服务器上取好、和 HTML 一起送达，用户端没有 loading 闪烁，爬虫直接拿到内容。代价是你要理解缓存——服务端取数意味着每次渲染都打一次后端，不打缓存的话，高流量下后端会被打爆。所以「数据获取」和「缓存策略」在本课是同一件事的两面。

面试中「Next.js 的缓存机制」「fetch 什么时候重新请求」「SSG 数据更新了怎么办」是持续高频的题目，本课给出能背的标准答案。

先建立图像

先看完整链路，了解数据从哪来到哪去（本站同款架构）：

浏览器 ──请求 /tracks/xxx──→ Next.js 服务器
                              │
                              ├─ ① 查 Next.js 数据缓存（Data Cache）
                              │      命中 → 直接用，不打后端
                              │      未命中 ↓
                              ├─ ② fetch → Spring Boot /api/tracks/xxx
                              │      拿到 JSON，按策略写入缓存
                              ↓
                        渲染成 HTML → 返回浏览器

fetch 缓存策略速查表（重点背这张）：

写法	行为	适用
fetch(url)	Next 14 默认缓存；Next 15 起默认不缓存	视版本
fetch(url, { cache: "force-cache" })	强制缓存（构建时/首次取后复用）	内容稳定：课程目录、配置
fetch(url, { next: { revalidate: 3600 } })	缓存 3600 秒，过期后台刷新（ISR）	定期更新：文章、榜单
fetch(url, { cache: "no-store" })	每次请求都现打后端	实时数据：用户进度、库存

三层缓存的分工（面试标准图）：

Request Memoization 请求记忆：同一次渲染内，相同 fetch 只发一次（自动，无需配置）
Data Cache 数据缓存：跨请求持久，revalidate 控制寿命
Router Cache 路由缓存：浏览器端缓存已访问过的路由段，点返回键秒开

跟着做

步骤 1：最基础的 Server 端取数