fetch

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

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

サーバーコンポーネント内でfetchをasyncとawaitで直接呼び出すことができます。

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データキャッシュとどのようにやり取りするかを設定します。

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

• auto no cache (デフォルト): 開発環境では、Next.jsはすべてのリクエストでリモートサーバーからリソースをフェッチしますが、ルートが静的にプリレンダリングされるため、next build中は1回だけフェッチします。ダイナミックAPIがルートで検出された場合、Next.jsはすべてのリクエストでリソースをフェッチします。
• no-store: ルートでダイナミックAPIが検出されない場合でも、Next.jsはすべてのリクエストでリモートサーバーからリソースをフェッチします。
• force-cache: Next.jsは、データキャッシュ内で一致するリクエストを探します。
  • 一致するものが存在し、それが最新である場合、キャッシュから返されます。
  • 一致するものがないか、古い一致である場合、Next.jsはリモートサーバーからリソースをフェッチし、ダウンロードしたリソースでキャッシュを更新します。

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オプションを設定する必要はありません。
• { revalidate: 3600, cache: 'no-store' }のような競合するオプションはエラーを引き起こします。

options.next.tags

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

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

トラブルシューティング

開発環境でfetchのデフォルトauto no storeとcache: 'no-store'が最新のデータを表示しない

Next.jsは、ローカル開発環境におけるHot Module Replacement (HMR) 全体で、より高速な応答と、課金されるAPI呼び出しのコスト削減のために、サーバーコンポーネント内のfetch応答をキャッシュします。

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

serverComponentsHmrCacheのドキュメントで詳細を確認してください。

バージョン履歴