共通レイアウト(長いキャッシュ)

cacheLife('hours') - 全ページで共有

高度
タイトル
共通レイアウト
キャッシュ時刻

このレイアウトは1時間キャッシュされ、すべてのページで共有されます。

10. Interleavingパターン

children/slotsを使った柔軟なキャッシュ構成を示します。

概念

Interleavingパターンでは、異なるcacheLifeを持つコンポーネントを組み合わせて、柔軟なキャッシュ構成を実現します。

レイアウト、ページ、スロットがそれぞれ独立したキャッシュを持ち、更新頻度に応じて最適化できます。

ページコンテンツ(短いキャッシュ)

cacheLife('seconds') - 頻繁に更新

高度
読み込み中...

サイドバー(中程度のキャッシュ)

cacheLife('minutes') - 適度に更新

高度
読み込み中...

Interleavingの利点

柔軟なキャッシュ戦略

高度
独立したキャッシュ

各コンポーネントが独自のcacheLifeを持ち、それぞれ最適化できます

効率的な再検証

期限切れのコンポーネントだけが再取得されます

パフォーマンス向上

不要な再計算を避け、高速なレスポンスを実現

使用例

実際の活用シーン

高度
ダッシュボード

共通ヘッダー(長)+ メインコンテンツ(短)+ サイドバー(中)

ECサイト

商品情報(長)+ 在庫数(短)+ レコメンド(中)

試してみよう

  1. 各コンポーネントのキャッシュ時刻を確認してください。
  2. ページをリロードして、レイアウトのキャッシュ時刻が変わらないことを確認してください。
  3. 1分後にリロードして、ページコンテンツだけが更新されることを確認してください。
  4. サブページに移動して、レイアウトが共有されることを確認してください。