fetch

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

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

Server Components 内で直接 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 Data Cache とどのように相互作用するかを設定します。

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

• auto no cache（デフォルト）：Next.js は開発時にはリモートサーバーからリソースをすべてのリクエストで取得しますが、ルートが静的にプリレンダリングされるため next build 中に 1 回取得します。ルートで Dynamic APIs が検出された場合、Next.js はすべてのリクエストでリソースを取得します。
• no-store：Next.js はリモートサーバーからリソースをすべてのリクエストで取得します。Dynamic APIs が検出されていない場合でも同様です。
• force-cache：Next.js は Data Cache 内で一致するリクエストを探します。
  • 一致があり、それが新しい場合、キャッシュから返されます。
  • 一致がない、または古い一致がある場合、Next.js はリモートサーバーからリソースを取得し、ダウンロードされたリソースでキャッシュを更新します。

options.next.revalidate

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

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

• false - リソースを無期限にキャッシュします。セマンティクス的には revalidate: Infinity と同等です。HTTP キャッシュは時間の経過とともに古いリソースを削除する場合があります。
• 0 - リソースがキャッシュされるのを防ぎます。
• number - （秒単位）リソースのキャッシュ有効期間が最大 n 秒であることを指定します。

補足：

• 個別の fetch() リクエストが ルートのデフォルト revalidate より低い revalidate 数値を設定する場合、ルート全体の再検証間隔が減少します。
• 同じルート内で同じ URL を持つ 2 つの fetch リクエストが異なる revalidate 値を持つ場合、より低い値が使用されます。
• { 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）全体で Server Components の fetch レスポンスをキャッシュして、より高速なレスポンスと課金対象の API 呼び出しのコスト削減を実現しています。

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

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

開発時のハードリフレッシュとキャッシング

開発モードでは、リクエストに cache-control: no-cache ヘッダーが含まれている場合、options.cache、options.next.revalidate、及び options.next.tags は無視され、fetch リクエストはソースから提供されます。

ブラウザは通常、デベロッパーツールでキャッシュが無効化されている場合またはハードリフレッシュ時に cache-control: no-cache を含めます。

バージョン履歴