fetch

Next.js 扩展了原生的 Web fetch() API，允许服务器上的每个请求设置自己的持久缓存和重新验证语义。

在浏览器中，cache 选项指示 fetch 请求将如何与浏览器的 HTTP 缓存交互。通过这个扩展，cache 指示服务器端 fetch 请求将如何与框架的持久数据缓存交互。

你可以在服务器组件中直接使用 async 和 await 调用 fetch。

app/page.tsx

export default async function Page() {
  // 此请求应该被缓存，直到手动失效。
  // 类似于 `getStaticProps`。
  // `force-cache` 是默认值，可以省略。
  const staticData = await fetch(`https://...`, { cache: "force-cache" });
 
  // 此请求应该在每次请求时重新获取。
  // 类似于 `getServerSideProps`。
  const dynamicData = await fetch(`https://...`, { cache: "no-store" });
 
  // 此请求应该被缓存，生命周期为 10 秒。
  // 类似于带有 `revalidate` 选项的 `getStaticProps`。
  const revalidatedData = await fetch(`https://...`, {
    next: { revalidate: 10 },
  });
 
  return <div>...</div>;
}

app/page.js

export default async function Page() {
  // 此请求应该被缓存，直到手动失效。
  // 类似于 `getStaticProps`。
  // `force-cache` 是默认值，可以省略。
  const staticData = await fetch(`https://...`, { cache: "force-cache" });
 
  // 此请求应该在每次请求时重新获取。
  // 类似于 `getServerSideProps`。
  const dynamicData = await fetch(`https://...`, { cache: "no-store" });
 
  // 此请求应该被缓存，生命周期为 10 秒。
  // 类似于带有 `revalidate` 选项的 `getStaticProps`。
  const revalidatedData = await fetch(`https://...`, {
    next: { revalidate: 10 },
  });
 
  return <div>...</div>;
}

`fetch(url, options)`

由于 Next.js 扩展了 Web fetch() API，你可以使用任何可用的原生选项。

`options.cache`

配置请求应如何与 Next.js 数据缓存交互。

fetch(`https://...`, { cache: "force-cache" | "no-store" });

no-store (默认值)：Next.js 在每次请求时从远程服务器获取资源，不查看缓存，也不会用下载的资源更新缓存。
force-cache：Next.js 在其数据缓存中查找匹配的请求。
- 如果有匹配且未过期，将从缓存中返回。
- 如果没有匹配或匹配已过期，Next.js 将从远程服务器获取资源，并用下载的资源更新缓存。

值得注意的是：no-cache 选项在 Next.js 中的行为与 no-store 相同。

`options.next.revalidate`

fetch(`https://...`, { next: { revalidate: false | 0 | number } });

设置资源的缓存生命周期 (以秒为单位)。

false - 无限期缓存资源。在语义上等同于 revalidate: Infinity。HTTP 缓存可能会随时间驱逐较旧的资源。
0 - 防止资源被缓存。
number - (以秒为单位) 指定资源应该有最多 n 秒的缓存生命周期。

值得注意的是：

如果单个 fetch() 请求设置的 revalidate 数值低于路由的默认 revalidate，整个路由的重新验证间隔将会减少。

如果同一路由中两个具有相同 URL 的 fetch 请求有不同的 revalidate 值，将使用较低的值。

为方便起见，如果设置了 revalidate 为数字，就不需要设置 cache 选项。

诸如 { revalidate: 3600, cache: 'no-store' } 这样的冲突选项将导致错误。

`options.next.tags`

fetch(`https://...`, { next: { tags: ["collection"] } });

设置资源的缓存标签。然后可以使用 revalidateTag 按需重新验证数据。自定义标签的最大长度为 256 个字符，最大标签项数为 64。

版本历史

版本	变更
`v15.0.0`	默认 `cache` 选项从 `'force-cache'` 更改为 `'no-store'`
`v13.0.0`	引入 `fetch`