fetch

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

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

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

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中は一度だけ取得します。ルート上でDynamic APIが検出された場合、Next.jsは毎リクエスト時にリソースを取得します。
• no-store：ルート上でDynamic 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つのフェッチリクエストが異なるrevalidate値を持つ場合、より低い値が使用されます。
• 便宜上、revalidateが数値に設定されている場合、cacheオプションを設定する必要はありません。
• { revalidate: 3600, cache: 'no-store' }のような矛盾するオプションはエラーを引き起こします。

options.next.tags

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

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

トラブルシューティング

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

Next.jsは開発環境のホットモジュールリプレイスメント（HMR）間でサーバーコンポーネントのfetchレスポンスをキャッシュし、応答を高速化し、課金されるAPIコールのコストを削減します。

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

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

バージョン履歴