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

• no-store（デフォルト）：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文字、最大タグ項目数は64です。

トラブルシューティング

cache: 'no-store' のフェッチが開発中に最新のデータを表示しない

Next.jsは、サーバーコンポーネントでのHot Module Replacement（HMR）中に、より高速な応答と課金対象のAPIコールのコスト削減のために、フェッチ応答をキャッシュします。

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

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

バージョン履歴