TL;DR
Next.js には、Request Memoization、Data Cache、Full Route Cache、Client-side Router Cache の 4 種類のキャッシュがある。前の 3 つはサーバに、最後の 1 つはクライアントにある。
仕組み
| 仕組み | 何をキャッシュするか | 場所 | 目的 | キャッシュ期間 |
|---|---|---|---|---|
| Request Memoization | 関数の戻り値 | サーバ | React のコンポーネントツリーの中でデータを再利用する | リクエストごと |
| Data Cache | データ | サーバ | ユーザのリクエストやデプロイをまたいでデータを保存する | 永続（Revalidate 可能） |
| Full Route Cache | HTML と RSC Payload | サーバ | レンダリングのコストを減らし、パフォーマンスを上げる | 永続（Revalidate 可能） |
| Client-side Router Cache | RSC Payload | クライアント | ページ遷移のときのサーバへのリクエストを減らす | ユーザのセッション、または Time-based Revalidation |