【資料公開】 Next.js 16の新機能 Cache Components についてというタイトルで発表させていただきました #cm_react
西田@リテールアプリ共創部マッハチームです
今回は 12/22 (月) に行われた クラスメソッドのReact事情大公開スペシャル#7 で「Next.js 16の新機能 Cache Components について」というタイトルで発表させていただきました
資料
発表内容の概要
Next.js 16で導入された新機能「Cache Components」について発表しました
Cache Components とは？
Next.js 16で正式採用された新機能で、「"use cache"ディレクティブを宣言することで、1つのページにキャッシュされた静的コンテンツと動的コンテンツを共存させることができる」機能です
従来のキャッシュとの違い
"use cache" ディレクティブを宣言した箇所のみがキャッシュされるようになります（オプトイン型）
動作の仕組み
サーバーからスケルトンHTML/CSS/JS（静的シェル）を返却し後から動的コンテンツを注入することによって、高速な初期表示と動的コンテンツの表示を両立させています
使用方法
next.config.tsでcacheComponents: trueを設定して有効化"use cache"ディレクティブをコンポーネント、関数、またはページレベルで指定- 動的な部分は
<Suspense>でラップ
キャッシュライフサイクル管理（cacheLife）
cacheLifeオプションで有効期限を設定できます。複数のプロファイルが用意されています。 cacheLife に設定された値によって、柔軟なキャッシュの更新が行えます
明示的なキャッシュ制御
updateTagとrevalidateTagでタグベースのキャッシュ無効化を実装できます。コンテンツ更新時に特定タグを指定して削除することが可能です
React 19との連携
Activityコンポーネント（React 19新機能）により、unmountされても状態保持が実現します。Next.jsのクライアントナビゲーション使用時、Stateが保持されます
ユースケース
- ECサイト：商品ページ（全ユーザー共通、キャッシュ推奨）とヘッダのユーザー名やカート情報（動的）の混在
- 会員制ブログ：コンテンツ（共通）とサイドバーのプロフィール（ユーザー固有）の混在
感想
今回は Next.js 16 の新機能「Cache Components」について発表しました。
オンライン参加を含め50名近くの方にご参加いただきました
懇親会では実践的な AI の使い方なんかも話題も出て、楽しかったです
次回も近々開催予定ですので、少しでも興味のある方はぜひ現地（主に大阪）で参加してみてください！
