跳到主要内容

fetch

Next.js 扩展了 Web api 的 fetch() API，允许服务器上的每个请求设置自己的持久性缓存。

export default async function Page() {
  // `force-cache` 是默认的参数，可以忽略
  const staticData = await fetch(`https://...`, { cache: 'force-cache' })
 
  // 这个请求不会被缓存
  const dynamicData = await fetch(`https://...`, { cache: 'no-store' })
 
  // 此请求会被缓存10秒
  const revalidatedData = await fetch(`https://...`, {next: { revalidate: 10 }})
 
  return <div>...</div>
}

fetch(url, options)​

options.cache​

fetch(`https://...`, { cache: 'force-cache' | 'no-store' })
  • force-cache: (默认)，强制缓存。
  • no-store: 不缓存。

options.next.revalidate​

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

设置资源的缓存生存期（以秒为单位）。

  • false, 无限期缓存资源。
  • 0, 防止资源被缓存。
  • number, （以秒为单位）指定资源的缓存生存期应为最多 n 秒。

options.next.tags​

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

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