メインコンテンツまでスキップ

fetch

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

ブラウザでは、cacheオプションは、fetchリクエストがブラウザの_HTTPキャッシュとどのようにやり取りするかを示します。この拡張では、cacheはサーバー側の_fetchリクエストがフレームワークの永続的なData Cacheとどのようにやり取りするかを示します。

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

app/page.tsx
export default async function Page() {
  let data = await fetch('https://api.vercel.app/blog')
  let posts = await data.json()
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  )
}

fetch(url, options)​

Next.jsはWeb fetch() APIを拡張しているので、利用可能なネイティブオプションを使用できます。

options.cache​

Next.jsのData Cacheとリクエストがどのようにやり取りするかを設定します。

fetch(`https://...`, { cache: 'force-cache' | 'no-store' })
  • no-store （デフォルト）：Next.jsは、キャッシュを参照せず、すべてのリクエストでリモートサーバーからリソースを取得し、ダウンロードされたリソースでキャッシュを更新しません
  • force-cache：Next.jsはData Cache内で一致するリクエストを検索します
    • 一致があり、それが新鮮であれば、キャッシュから返されます
    • 一致がないか古い一致であれば、Next.jsはリモートサーバーからリソースを取得し、ダウンロードされたリソースでキャッシュを更新します

options.next.revalidate​

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

リソースのキャッシュの有効期間（秒単位）を設定します。

  • false - リソースを無期限にキャッシュします。これにより、HTTPキャッシュは時間の経過とともに古いリソースを削除することがあります
  • 0 - リソースがキャッシュされないようにします
  • number - （秒単位）リソースが最大n秒間キャッシュされるべきであることを指定します

Good to know:

  • 個々のfetch()リクエストがルートのデフォルトのrevalidateより低いrevalidate数を設定した場合、ルート全体の再検証インターバルが短くなります
  • 同一のルートにおいて、同じURLを持つ二つのfetchリクエストが異なるrevalidate値を持つ場合、低い方の値が使用されます
  • 便利なことに、revalidateが数値に設定されている場合、cacheオプションを設定する必要はありません
  • { revalidate: 3600, cache: 'no-store' }のような矛盾したオプションはエラーを引き起こします

options.next.tags​

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

リソースのキャッシュタグを設定します。このデータは、revalidateTagを使用してオンデマンドで再検証することができます。カスタムタグの最大長は256文字で、最大タグ項目数は64です。

トラブルシューティング​

開発環境でfetch cache: 'no-store' が新鮮なデータを表示しない​

Next.jsは、ローカル開発環境での高速な応答と課金API呼び出しのコストを削減するために、Server Components内のfetchレスポンスをホットモジュールリプレースメント（HMR）間でキャッシュします。

デフォルトでは、HMR キャッシュは、cache: 'no-store'オプションを含むすべてのfetchリクエストに適用されます。これにより、HMRの更新間でキャッシュされていないリクエストは新鮮なデータを表示しません。ただし、ナビゲーションまたはページ全体を再読み込みするとキャッシュがクリアされます。

詳細はserverComponentsHmrCacheのドキュメントを参照してください。

バージョン履歴​

バージョン変更点
v13.0.0fetchが導入されました