Next.js Data Fetching Next 数据获取
最后更新：2026-10-28
Next.js Data Fetching Next 数据获取
Next.js 服务端组件可直接 await fetch 取数，并用 next.revalidate 控制缓存策略：SSG、ISR 与 SSR 由同一套 API 表达。缓存是默认行为，理解策略才能兼顾速度与新鲜度。
| 分组 | 生态与进阶 |
|---|---|
| 类型 | 模式 |
| 引入版本 | Next.js 13.4+（App Router 稳定）；15 起 fetch 默认不再缓存 |
ℹ️ 说明 编辑器将 JSX 转译为 JavaScript 后在沙箱中渲染真实界面；组件自动挂载，无需手写 render 调用。
📝 语法
// 服务端组件里直接 fetch（无需 useEffect）
const res = await fetch('https://api.example.com/posts', {
next: { revalidate: 60 } // ISR：缓存 60 秒
})
const posts = await res.json()
// 其他策略：
// next: { revalidate: 0 } → SSR：每次请求现取
// cache: 'no-store' → 完全不缓存（同 SSR）
// 不传任何选项 → SSG：构建时取一次
// next: { tags: ['posts'] } → 打标签，可用 revalidateTag 精准失效⚙️ 参数
| next.revalidate | 缓存存活秒数：0 表示每次请求重新获取（SSR），不设置则构建时取一次（SSG），N 表示每 N 秒后台再生（ISR）。 |
|---|---|
| cache: 'no-store' | 彻底禁用缓存，等效于动态渲染，适合强实时数据。 |
返回值：无返回值，数据获取发生在服务端，策略说明见语法与示例。
▶ 示例
示例可直接运行：展开后自动渲染，编辑代码即时生效。
输出结果：
模拟演示：点击 SSG / ISR / SSR 三个按钮切换策略，下方信息面板实时显示对应的 revalidate 参数、数据新鲜度（构建时快照 / ≤60 秒前 / 实时）与适用场景说明，直观对比三种缓存策略在速度与新鲜度上的取舍。💡 要点
⚠️ 注意 Next.js 15 起 fetch 默认不缓存：想要 SSG / ISR 必须显式写 next.revalidate，升级后行为与 14 不同。
💡 提示 给请求打标签 fetch(url, { next: { tags: ['posts'] } })，数据变更后调用 revalidateTag('posts') 可精准失效缓存，不必全站再生。
ℹ️ 说明 客户端组件仍用 useEffect / TanStack Query 取数；服务端取数逻辑不能写进带 'use client' 的文件。
🏷️ 生态与进阶相关
💡 相关案例
更多案例整理中，敬请期待。
📚 相关教程
❓ 常见问题
Q 服务端组件里怎么取数？
A 直接在 async 组件里 await fetch(...)，无需 useEffect 与状态管理。取数发生在构建时或请求时的服务器上，不增加客户端负担。
Q SSG、ISR、SSR 怎么选？
A 内容不常变（文档、博客）选 SSG；需要定时更新（商品、列表页）选 ISR；完全个性化或强实时数据选 SSR。同一站点不同页面可以混用。
Q 客户端组件能这样 fetch 吗？
A 不能。next.revalidate 选项只在服务端生效；客户端组件请用 useEffect / SWR / TanStack Query，并自行处理加载与错误状态。
