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' })
auto no cache
(デフォルト):Next.jsは開発環境では毎リクエスト時にリモートサーバーからリソースを取得しますが、ルートが静的にプリレンダリングされるため、next build
中は一度だけ取得します。ルート上でDynamic APIが検出された場合、Next.jsは毎リクエスト時にリソースを取得します。no-store
:ルート上でDynamic 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つのフェッチリクエストが異なる
revalidate
値を持つ場合、より低い値が使用されます。- 便宜上、
revalidate
が数値に設定されている場合、cache
オプションを設定する必要はありません。{ revalidate: 3600, cache: 'no-store' }
のような矛盾するオプションはエラーを引き起こします。
options.next.tags
fetch(`https://...`, { next: { tags: ['collection'] } })
リソースのキャッシュタグを設定します。データはrevalidateTag
を使用してオンデマンドで再検証できます。カスタムタグの最大長は256文字で、最大タグアイテム数は128です。
トラブルシューティング
フェッチのデフォルトauto no store
とcache: 'no-store'
が開発環境で最新データを表示しない
Next.jsは開発環境のホットモジュールリプレイスメント(HMR)間でサーバーコンポーネントのfetch
レスポンスをキャッシュし、応答を高速化し、課金されるAPIコールのコストを削減します。
デフォルトでは、HMRキャッシュはデフォルトのauto no cache
やcache: 'no-store'
オプションを含むすべてのフェッチリクエストに適用されます。これは、キャッシュされていないリクエストがHMRの更新間で新しいデータを表示しないことを意味します。ただし、ナビゲーションまたは完全なページのリロード時にキャッシュはクリアされます。
詳細については、serverComponentsHmrCache
のドキュメントを参照してください。
バージョン履歴
バージョン | 変更点 |
---|---|
v13.0.0 | 導入時期:fetch 。 |