fetch

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

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

サーバーコンポーネント内で直接 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文字です。

バージョン履歴