︙

fetch

Next.js はネイティブのWeb fetch() API を拡張して、server 上の各 request が自身の持続的なキャッシングセマンティクスを設定できるようにします。

ブラウザでは、cacheオプションは、 fetch request が ブラウザの HTTP cache とどのようにやり取りするかを示します。この拡張機能では、cacheは、_ server-side _ の fetch request がフレームワークの永続的な HTTP cache とどのようにやり取りするかを示します。

fetchをasyncおよびawaitで直接 Server Components 内で呼び出すことができます。

app/page.tsx

export default async function Page() {
  // This request should be cached until manually invalidated.
  // Similar to `getStaticProps`.
  // `force-cache` is the default and can be omitted.
  const staticData = await fetch(`https://...`, { cache: 'force-cache' })

  // This request should be refetched on every request.
  // Similar to `getServerSideProps`.
  const dynamicData = await fetch(`https://...`, { cache: 'no-store' })

  // This request should be cached with a lifetime of 10 seconds.
  // Similar to `getStaticProps` with the `revalidate` option.
  const revalidatedData = await fetch(`https://...`, {
    next: { revalidate: 10 },
  })

  return <div>...</div>
}

app/page.js

export default async function Page() {
  // This request should be cached until manually invalidated.
  // Similar to `getStaticProps`.
  // `force-cache` is the default and can be omitted.
  const staticData = await fetch(`https://...`, { cache: 'force-cache' })

  // This request should be refetched on every request.
  // Similar to `getServerSideProps`.
  const dynamicData = await fetch(`https://...`, { cache: 'no-store' })

  // This request should be cached with a lifetime of 10 seconds.
  // Similar to `getStaticProps` with the `revalidate` option.
  const revalidatedData = await fetch(`https://...`, {
    next: { revalidate: 10 },
  })

  return <div>...</div>
}

`fetch(url, options)`

Next.js は、Web fetch() API を拡張しているので、使用可能なネイティブの options を利用することができます。

`options.cache`

request が Next.js とどのように対話するべきかを設定してください。 Data Cache。

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

force-cache ( default ) - Next.js は、そのデータ Cache 内で一致する request を探します。
- マッチがあり、それが新鮮であれば、cache から返されます。
- 一致がないか、stale な一致の場合、Next.js はリモートの server からリソースを fetch し、ダウンロードしたリソースで cache を更新します。
no-store - Next.js は、 cache を確認せずに毎回 request ごとにリモートの server からリソースを取得し、ダウンロードしたリソースで cache を更新しません。

Good to know:

cache オプションを提供しない場合、Next.js は force-cacheに default し、dynamic function である cookies() が使用される場合は、no-store に default します。

no-cacheオプションは、Next.js のno-storeと同じように動作します。

`options.next.revalidate`

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

リソースの cache ライフタイム(秒単位)を設定します。

false - リソースを無期限に Cache します。これは revalidate: Infinity と意味的に同等です。 HTTP cache は、時間の経過と共に古いリソースが追い出される場合があります。
0 - リソースがキャッシュされるのを防ぎます。
number - (秒) リソースが最大でもn秒の cache 持続時間を持つべきであることを指定します。

Good to know:

個々のfetch()request が、default の revalidateよりも低い番号のrevalidateを設定する場合、全体の route の再検証間隔が短くなります。

もし同じ URL を持つ 2 つの fetch Request が同じ route 内で異なる revalidate 値を持つ場合、低い value が使用されます。

便宜上、revalidateが number に設定されている場合、cacheオプションを設定する必要はありません。なぜなら、0はcache: 'no-store'を意味し、正の value はcache: 'force-cache'を意味するからです。

{ revalidate: 0, cache: 'force-cache' }や { revalidate: 10, cache: 'no-store' }のような、競合する options は error を引き起こします。

`options.next.tags`

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

リソースの cache タグを設定します。その後、データはrevalidateTag を使用してオンデマンドで再検証できます。カスタムタグの最大長は 256 文字です。

Version History

Version	Changes
`v13.0.0`	`fetch` 導入されました。