Next.js 16の新機能 Cache Components について

Transcript

1. Next.js 16の新機能 Cache Components について 1
2. 2 自己紹介 西田将幸 クラスメソッド リテールアプリ共創部 マッハチーム エンジニアとして働いてます 主にバックエンドでフロントエンドFlutterと薄く広くやってます
3. 3 全体の流れ 1. Cache Componentsとは？ 2. Cache Componentsの仕組み 3. 自作した CloudFront + SSG の構成との比較
4. 4 Cache Componentsとは？
5. 5 Cache Componentsとは？ • Next 16 で正式に採用された機能 • 1つのページにキャッシュさせた静的コンテンツと 動的コンテンツを共存させることができる
6. 6 静的な要素と動的な要素が混在 全ユーザー共通のキャッ シュしても問題ない静的な 要素 と ユーザー固有の動的な要 素が１つのページに混在 してる
7. 7 使い所の例 1. ECサイト ◦ 商品ページは全てのユーザーで共通なのでキャッシュしたい が、ヘッダにはログインしたユーザー名やカート情報など、 ユーザー特有の情報を表示させたい 2. 会員制のブログ ◦ コンテンツ自体は全てのユーザーで共通だが、ユーザーのプ ロフィールがサイドバーに表示されている
8. 8 準備 next.config.ts で cacheComponents を true を設定
9. 9 使い方 “use cache” ディレクティブを宣言する
10. 10 useCache を指定できる範囲 • コンポーネント • 関数 • ページ
11. 11 今までのキャッシュとの違い 1. いままでのキャッシュ ◦ fetch関数がデフォルトでキャッシュ キャッシュさせたくない場合は明示的にオプトアウト 2. “use cache” 以降のキャッシュ ◦ “use cache” ディレクティブが宣言されたところが キャッシュされる。オプトイン
12. 12 Suspenseで動的部分を囲う 動的な部分は <Suspense> で囲う
13. 13 Suspenseで動的部分を囲う
14. 14 cacheLife cacheLifeでcacheの有効期限を設定
15. 15 cacheLifeのオプション cacheLifeのオプション プロファイル ユースケース stale revalidate expire default 標準コンテンツ 5分 15分 1年 seconds リアルタイムデータ 30秒 1秒 1分 minutes 頻繁に更新されるコンテンツ 5分 1分 1時間 hours 1日に複数回更新されるコンテンツ 5分 1時間 1日 days 毎日更新されるコンテンツ 5分 1日 1週間 weeks 毎週更新されるコンテンツ 5分 1週間 30日 max ほとんど変更されない安定したコンテンツ 5分 30日 1年
16. 16 cacheLifeのオプション
17. 17 updateTag, revalidateTag 明示的にキャッシュを削除する時はupdateTag, revalidateTag を使う 例えばコンテンツを更新するような操作が行われときに明示 的にキャッシュをクリアします
18. 18 updateTag, revalidateTag キャッシュにタグ名を設定し タグ名を指定してキャッシュを削除
19. 19 use cache: remote キャッシュをサーバーに残す指定
20. 20 use cache: private キャッシュをサーバーのメモリに残さない指定
21. 21 React の Activity React 19 で使えるようになったコンポーネントで unmount さ れても状態を保持する
22. 22 Next.js のクライアントナビゲーションで状態保持 next.config で cacheComopnents が true になってる場合、ク ライアントナビゲーションで画面遷移しても ステートの値が保持されます
23. 23 Cache Componentsの仕組み
24. 24 Application Shell Architecture あらかじめサーバからはスケルトンのHTML,CSS,JSを アプリに返却し高速に初期表示を行い、 後から動的なコンテンツを注入する手法 高速な初期表示と動的な要素の表示を実現する方法
25. 25 Application Shell Architecture
26. 26 use cacheのコンテンツは静的シェルに含められる “use cache” を宣言されたコンテンツは、 キャッシュされ静的シェルに含められる
27. 27 use cacheのコンテンツは静的シェルに含められる “use cache” されたコンテン ツは静的シェルに含められ るので初回表示は遅くなる ２回目位以降は高速
28. 28 RSCペイロード React Server Component ペイロード サーバーでレンダリングされた情報をシリアライズ それをクライアントで組み立てる クライアントナビゲーションで画面遷移した際は RSC Payload のみクライアントに送信 “use cache” されてない動的要素は RSC で送信される
29. 29 use cacheのコンテンツは静的シェルに含められる 静的シェルの後に RSCペイロードを送信 その間 Suspense の fallbackが表示
30. 30 自作した CloudFront + SSG の構成との比較
31. 31 同じような目的で自作した構成 • 1つのNext.jsだけで 構成 • S3 + CFで WEBホスティング • API Routes で動的 要素をAPIで提供
32. 32 自作した構成 • 事前にStatic ExportしたHTML,CSS,JSをS3 + CloudFront で WEBホスティング • 動的な情報を返却するAPIを提供する App Runner でデプ ロイ • 静的なコンテンツはビルドして、動的なコンテンツは useEffect を使ってデータ取得（useEffectの処理はクライア ント側で実行される)
33. 33 AWSでNext.jsシンプルに動かす構成 • ALB + Fargate
34. 34 自作した構成 • “use cache” キャッシュされたコンテンツはサーバー上のメ モリにキャッシュされる • キャッシュされたコンテンツもサーバーで処理する • Cloud Front + S3 の低コストで安定したキャッシュは出来な い
35. 35 Vercelで動かすと...? • おそらく、静的シェルはエッジにキャッシュされる？ • 高速に動くし、安定稼働は期待できそう...? • コストは自作より高くなるかも...?
36. 36 まとめ
37. 37 まとめ • “use cache” ディレクティブでオプトインのキャッシュができ るように • 1ページに静的、動的なコンテンツが両方あるけど 高速表示したい時に使える
38. プロダクトの0→1⽴ち上げ 専⾨チーム ⼀緒に働く仲間を募集...! モダンな技術スタックを積極採用 • Hono, V0, Claude Code… 顧客と0距離 • プリセールス ~MVPリリースまで • 顧客対応も 2~3名の小規模チームで高速開発 • 1案件 2~6ヶ月 • マッハで経験が積める 📢マッハチーム 絶賛募集中