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

fetch

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

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

asyncおよびawaitを使用してServer Components内で直接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 - リソースを無期限にキャッシュします。revalidate: Infinityとセマンティクス的に等価です。HTTPキャッシュは、古いリソースを時間の経過とともに削除することがあります
  • 0 - リソースがキャッシュされるのを防ぎます
  • number - （秒単位で）リソースに最大でn秒のキャッシュ寿命を指定します

Good to know:

  • 個々のfetch()リクエストがルートのデフォルトのrevalidateより低いrevalidate数値を設定した場合、全体のルート再検証間隔が短くなります
  • 同じルートで同じURLを持つ2つのフェッチリクエストが異なるrevalidate値を持つ場合、より小さい値が使用されます
  • 便宜上、revalidateを数値に設定する場合、cacheオプションを設定する必要はありません
  • { revalidate: 3600, cache: 'no-store' }のような矛盾したオプションはエラーの原因となります

options.next.tags​

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

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

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

開発環境でのcache: 'no-store'を使ったFetchが新しいデータを表示しない​

Next.jsは、ローカル開発におけるホットモジュール置換（HMR）間でfetch応答をServer Componentsにキャッシュすることで、応答速度を速め、APIコールの料金を削減しています。

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

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

バージョン履歴​

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