フロントエンド開発の先端を突っ走るNext.js
next.js アプリの初期化( npx create-next-app@latest <アプリ名> ) または pnpm create next-app@latest <アプリ名> または bun create next-app <アプリ名> )

next.js ondemand ISR のキャッシュの場所

● next.js ondemand ISR のキャッシュファイル保存場所

1. キャッシュファイルの保存場所

オンデマンドISRのキャッシュファイルは、FileSystemCacheクラスのgetFilePathメソッドによって決定されます。 next.js:450-471

キャッシュの種類によって、以下のように保存されます:

  • Fetchキャッシュ → .next/cache/fetch-cacheディレクトリに保存されます。

  • ページキャッシュ → .next/server/appディレクトリに保存されます。

具体的には

・HTMLファイル: `{key}.html`
・RSCデータ: `{key}.rsc`(PPR有効時は`{key}.prefetch.rsc`)
・メタデータ: `{key}.meta`
・セグメントデータ: `{key}.rsc.segments/{segmentPath}.rsc.segment` next.js:379-434 
App Routeキャッシュ

.next/server/appディレクトリに保存されます。

Pagesルーターのキャッシュ

.next/server/pagesディレクトリに保存されます。

なお、キャッシュの場所はnext.config.jscacheHandlerオプションでカスタマイズ可能です。

2. ローカル開発サーバーではISR のキャッシュファイルは作成されない

ローカル開発サーバー(next dev)と本番ビルド(next build + next start)では、ISRキャッシュの動作とファイル生成に重要な違いがあります。

2-1 . HTMLファイルの生成
  • 本番環境では、静的にレンダリングされたページに対して.htmlファイルが生成されます。
  • 開発環境では、HTMLファイルは生成されません。代わりに、リクエストごとにオンデマンドでレンダリングされます。
2-2 . ファイル構造

本番ビルド時に生成されるファイル構造は各ルートに対して以下のファイルが生成されます:

.html - HTMLコンテンツ
.rsc - React Server Componentペイロード
No.2662
10/10 11:32

edit