Cache Components デモ集

Next.js 16のCache Components機能を網羅的に確認できるデモページ集です。
基礎（A）→ 実用（B）→ 高度（C）の順に段階的に学習することを推奨します。

Cache Componentsとは？

Cache Componentsは、Next.js 16で導入された新しいキャッシング機能です。従来の暗黙的なキャッシングから、明示的なオプトイン方式に変更されました。

  • • デフォルトで動的: すべてのコンテンツはデフォルトでリクエスト時にレンダリング
  • • 明示的なキャッシング: 「use cache」で静的化を選択
  • • 柔軟な制御: cacheLife、cacheTagによる細かい制御
  • • 部分的プリレンダリング: 静的シェルと動的ホールの組み合わせ

Next.js 公式ドキュメント →

デモ一覧

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. 1. 優先度Aから開始: 基礎機能を確実に理解しましょう
  2. 2. コードを読む: 各デモのソースコードを確認して実装方法を学びます
  3. 3. 動作を確認: タイムスタンプやキャッシュステータスで挙動を観察
  4. 4. 実験する: 設定を変えたり、コードを書き換えて試してみましょう