Cache Components デモ集
Next.js 16のCache Components機能を網羅的に確認できるデモページ集です。
基礎（A）→ 実用（B）→ 高度（C）の順に段階的に学習することを推奨します。
Cache Componentsとは？
Cache Componentsは、Next.js 16で導入された新しいキャッシング機能です。従来の暗黙的なキャッシングから、明示的なオプトイン方式に変更されました。
- • デフォルトで動的: すべてのコンテンツはデフォルトでリクエスト時にレンダリング
- • 明示的なキャッシング: 「use cache」で静的化を選択
- • 柔軟な制御: cacheLife、cacheTagによる細かい制御
- • 部分的プリレンダリング: 静的シェルと動的ホールの組み合わせ
デモ一覧
01. 基本的な use cache
ファイルレベル、コンポーネントレベル、関数レベルのキャッシュ動作を確認
未実装デモを見る →
02. cacheLife() プロファイル
プリセットとカスタムプロファイルによる再検証タイミングの制御
未実装デモを見る →
03. Suspense境界との統合
静的シェルと動的コンテンツを組み合わせたストリーミング
未実装デモを見る →
04. cacheTag() による再検証
タグベースの再検証とupdateTag/revalidateTagの使用方法
未実装デモを見る →
05. プライベートキャッシュ
'use cache: private'を使ったcookies/headers/searchParamsの扱い
未実装デモを見る →
06. connection() API
動的レンダリングの強制とMath.random/Date.nowの正しい扱い
未実装デモを見る →
07. generateStaticParams統合
動的ルートの静的生成とビルド時の動作
未実装デモを見る →
08. ネストしたキャッシュ
異なるcacheLifeを持つコンポーネントのネスト動作
未実装デモを見る →
09. Route Handlersのキャッシュ
GET Route HandlersでのCache Components動作
未実装デモを見る →
10. Interleavingパターン
children/slotsを使った柔軟なキャッシュ構成
未実装デモを見る →
学習の進め方
- 1. 優先度Aから開始: 基礎機能を確実に理解しましょう
- 2. コードを読む: 各デモのソースコードを確認して実装方法を学びます
- 3. 動作を確認: タイムスタンプやキャッシュステータスで挙動を観察
- 4. 実験する: 設定を変えたり、コードを書き換えて試してみましょう