fetch

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

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

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のデータキャッシュとどのようにやり取りするかを構成します。

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

auto no cache (デフォルト): Next.jsは、開発環境ではリクエストごとにリモートサーバーからリソースを取得します。ただし、next build中はルートが静的に事前レンダリングされるため、一度だけ取得します。ルートで動的APIが検出された場合、Next.jsはリクエストごとにリソースを取得します。
no-store: ルートで動的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つの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は、サーバーコンポーネントでのfetchレスポンスを、ローカル開発環境でのHot Module Replacement（HMR）を横断してキャッシュし、応答を速くし、課金対象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を含めます。

バージョン履歴

バージョン	変更履歴
`v13.0.0`	`fetch`が導入されました。