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' })

• force-cache (デフォルト): Next.js は、データキャッシュ内で一致するリクエストを探します。
  • 一致するものがあり、それが新鮮であれば、キャッシュから返されます。
  • 一致するものがない場合、または古い一致がある場合、Next.js はリモートサーバーからリソースを取得し、ダウンロードされたリソースでキャッシュを更新します。
• no-store: 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文字、タグアイテムの最大数は64個です。

トラブルシューティング

開発環境でcache: 'no-store'の`fetch`で最新データが表示されない

Next.jsは、ローカル開発環境でのホットモジュール置換（HMR）において、サーバーコンポーネント間で`fetch`レスポンスをキャッシュして、より高速なレスポンスを実現し、課金されるAPI呼び出しのコストを削減します。

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

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

バージョン履歴