0Pricing
React Academy · 课时

Next.js 中带缓存选项的 fetch()

在 fetch 中使用 force-cache、no-store 和 revalidate 选项来控制缓存行为。

Next.js 中带缓存选项的 fetch() 是 CoddyKit 上的免费 React Academy 课时。 这是第 1 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 React Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 React Academy 课程共包含 4 节课。

Next.js 中扩展的 fetch

Next.js 通过 next 选项扩展原生 fetch() API，用于控制缓存和重新验证。这仅适用于服务器组件和路由处理器。

force-cache（默认）

默认情况下，Next.js 中的 fetch() 使用 force-cache——它会无限期缓存响应，并在明确重新验证之前对所有请求复用该响应。

// Cached forever (build-time static)
const res = await fetch('https://api.example.com/config', {
  cache: 'force-cache',
});
const config = await res.json();

no-store — 始终获取最新数据

no-store 会完全禁用缓存。每个请求都会访问源站。它适用于个性化或敏感数据。

// Never cached — fresh on every request
const res = await fetch('https://api.example.com/user/me', {
  cache: 'no-store',
});
const user = await res.json();

revalidate — 基于时间的 ISR

next.revalidate 选项会缓存响应，但每隔 N 秒在后台重新验证一次（过期后重新验证模式）。

// Revalidate every 60 seconds
const res = await fetch('https://api.example.com/products', {
  next: { revalidate: 60 },
});
const products = await res.json();

片段级 revalidate

从页面或布局中导出 revalidate 常量，即可将重新验证间隔应用于该片段中的所有数据获取。

// app/products/page.tsx
export const revalidate = 60; // all fetches in this page revalidate every 60s

export default async function ProductsPage() {
  const products = await fetch('https://api.example.com/products').then(r => r.json());
  return <ProductList products={products} />;
}

next.tags — 基于标签的重新验证

使用 next.tags 为数据获取调用分配标签。在服务器操作或路由处理器中使用 revalidateTag(tag)，即可按需使所有带标签的缓存失效。

const res = await fetch('https://api.example.com/posts', {
  next: { tags: ['posts'] },
});

// In a Server Action or route handler:
import { revalidateTag } from 'next/cache';
revalidateTag('posts'); // invalidates all fetches tagged 'posts'

revalidatePath

revalidatePath(path) 会使特定 URL 路径的缓存失效，使其在下一次请求时重新生成。

import { revalidatePath } from 'next/cache';

// After creating a new post:
revalidatePath('/blog'); // purge /blog page cache
revalidatePath('/blog/[slug]', 'page'); // purge all /blog/[slug] pages

动态函数退出缓存

在页面中调用 cookies()、headers() 或读取 searchParams 会使页面变为动态页面，从而完全退出缓存。

import { cookies } from 'next/headers';

export default async function ProfilePage() {
  const token = cookies().get('token');
  // This page is now dynamic — not cached
  const user = await getUser(token?.value);
  return <Profile user={user} />;
}

去重

Next.js 会在单次渲染过程中对相同的数据获取调用进行去重——如果两个服务器组件获取同一个 URL，只会发出一个 HTTP 请求。

请求记忆化与缓存

这里有两个缓存层：请求记忆化（每个请求进行去重，自动完成）和数据缓存（持久存在，由缓存或重新验证选项控制）。

调试缓存行为

运行 next build 并检查构建输出——每个路由都会显示其渲染策略：静态（已缓存）、动态（无缓存）或 ISR（重新验证间隔）。

快速检查

对于很少变化、但应在无需完整重新部署的情况下更新的数据，应使用哪种 fetch 缓存选项？

回顾

静态数据使用 cache: 'force-cache'，始终保持最新的数据使用 cache: 'no-store'，ISR 使用 next: { revalidate: N }。使用 next.tags 为数据获取调用添加标签，并调用 revalidateTag() 按需使缓存失效。动态函数会自动使页面退出缓存。

常见问题解答

「Next.js 中带缓存选项的 fetch()」课时是免费的吗？

是的 — 「Next.js 中带缓存选项的 fetch()」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 React Academy 课程的其余内容，请升级到 CoddyKit PRO。 React Academy 课程共包含 4 节课。

「Next.js 中带缓存选项的 fetch()」这节课中我会学到什么？

在 fetch 中使用 force-cache、no-store 和 revalidate 选项来控制缓存行为。 你通过在浏览器中直接运行的动手代码来练习 React Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 React Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 React Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 1 节课，共 4 节。

「Next.js 中带缓存选项的 fetch()」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 React Academy 课中编写并运行代码吗？

能。每节 React Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. Next.js 中带缓存选项的 fetch()
  2. unstable_cache 与 React cache()
  3. 增量静态再生成（ISR）
  4. 用于数据变更的服务器操作
← 返回 React Academy