fetch

Next.js はネイティブの Web fetch() API を拡張し、サーバー上の各リクエストが独自の永続的なキャッシュセマンティクスを設定できるようにします。

ブラウザでは、cache オプションは fetch リクエストが ブラウザの HTTP キャッシュとどのように相互作用するかを示します。この拡張により、cache は サーバーサイド の fetch リクエストがフレームワークの永続的な HTTP キャッシュとどのように相互作用するかを示します。

Server Components 内で直接 async と await を使用して fetch を呼び出すことができます。

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>
}

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 のデータキャッシュ (Data Cache) とどのように相互作用するかを設定します。

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

• force-cache (デフォルト) - Next.js はデータキャッシュ内で一致するリクエストを探します。
  • 一致があり、新鮮な場合はキャッシュから返されます。
  • 一致がない場合や古い一致がある場合、Next.js はリモートサーバーからリソースを取得し、ダウンロードしたリソースでキャッシュを更新します。
• no-store - Next.js はキャッシュを調べずに毎回リモートサーバーからリソースを取得し、ダウンロードしたリソースでキャッシュを更新しません。

豆知識:

• cache オプションを指定しない場合、Next.js はデフォルトで force-cache になりますが、cookies() などの動的関数 (dynamic function) が使用されている場合は no-store がデフォルトになります。
• 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 に対する2つの fetch リクエストで revalidate の値が異なる場合、小さい方の値が使用されます。
• 利便性のため、revalidate が数値に設定されている場合、cache オプションを設定する必要はありません。0 は cache: 'no-store' を意味し、正の値は cache: 'force-cache' を意味します。
• { revalidate: 0, cache: 'force-cache' } や { revalidate: 10, cache: 'no-store' } などの矛盾するオプションはエラーを引き起こします。

options.next.tags

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

リソースのキャッシュタグを設定します。その後、revalidateTag を使用してオンデマンドでデータを再検証できます。カスタムタグの最大長は256文字で、最大タグアイテム数は128です。

バージョン履歴