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

by sutetotanuki

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

2 自己紹介西田将幸クラスメソッドリテールアプリ共創部マッハチームエンジニアとして働いてます主にバックエンドでフロントエンドFlutterと薄く広くやってます

Slide 3

Slide 3 text

3 全体の流れ 1. Cache Componentsとは？ 2. Cache Componentsの仕組み 3. 自作した CloudFront + SSG の構成との比較

Slide 4

Slide 4 text

4 Cache Componentsとは？

Slide 5

Slide 5 text

5 Cache Componentsとは？ ● Next 16 で正式に採用された機能 ● 1つのページにキャッシュさせた静的コンテンツと動的コンテンツを共存させることができる

Slide 6

Slide 6 text

6 静的な要素と動的な要素が混在全ユーザー共通のキャッシュしても問題ない静的な要素とユーザー固有の動的な要素が１つのページに混在してる

Slide 7

Slide 7 text

7 使い所の例 1. ECサイト ○ 商品ページは全てのユーザーで共通なのでキャッシュしたいが、ヘッダにはログインしたユーザー名やカート情報など、ユーザー特有の情報を表示させたい 2. 会員制のブログ ○ コンテンツ自体は全てのユーザーで共通だが、ユーザーのプロフィールがサイドバーに表示されている

Slide 8

Slide 8 text

8 準備 next.config.ts で cacheComponents を true を設定

Slide 9

Slide 9 text

9 使い方 “use cache” ディレクティブを宣言する

Slide 10

Slide 10 text

10 useCache を指定できる範囲 ● コンポーネント ● 関数 ● ページ

Slide 11

Slide 11 text

11 今までのキャッシュとの違い 1. いままでのキャッシュ ○ fetch関数がデフォルトでキャッシュキャッシュさせたくない場合は明示的にオプトアウト 2. “use cache” 以降のキャッシュ ○ “use cache” ディレクティブが宣言されたところがキャッシュされる。オプトイン

Slide 12

Slide 12 text

12 Suspenseで動的部分を囲う動的な部分はで囲う

Slide 13

Slide 13 text

13 Suspenseで動的部分を囲う

Slide 14

Slide 14 text

14 cacheLife cacheLifeでcacheの有効期限を設定

Slide 15

Slide 15 text

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年

Slide 16

Slide 16 text

16 cacheLifeのオプション

Slide 17

Slide 17 text

17 updateTag, revalidateTag 明示的にキャッシュを削除する時はupdateTag, revalidateTag を使う例えばコンテンツを更新するような操作が行われときに明示的にキャッシュをクリアします

Slide 18

Slide 18 text

18 updateTag, revalidateTag キャッシュにタグ名を設定しタグ名を指定してキャッシュを削除

Slide 19

Slide 19 text

19 use cache: remote キャッシュをサーバーに残す指定

Slide 20

Slide 20 text

20 use cache: private キャッシュをサーバーのメモリに残さない指定

Slide 21

Slide 21 text

21 React の Activity React 19 で使えるようになったコンポーネントで unmount されても状態を保持する

Slide 22

Slide 22 text

22 Next.js のクライアントナビゲーションで状態保持 next.config で cacheComopnents が true になってる場合、クライアントナビゲーションで画面遷移してもステートの値が保持されます

Slide 23

Slide 23 text

23 Cache Componentsの仕組み

Slide 24

Slide 24 text

24 Application Shell Architecture あらかじめサーバからはスケルトンのHTML,CSS,JSをアプリに返却し高速に初期表示を行い、後から動的なコンテンツを注入する手法高速な初期表示と動的な要素の表示を実現する方法

Slide 25

Slide 25 text

25 Application Shell Architecture

Slide 26

Slide 26 text

26 use cacheのコンテンツは静的シェルに含められる “use cache” を宣言されたコンテンツは、キャッシュされ静的シェルに含められる

Slide 27

Slide 27 text

27 use cacheのコンテンツは静的シェルに含められる “use cache” されたコンテンツは静的シェルに含められるので初回表示は遅くなる２回目位以降は高速

Slide 28

Slide 28 text

28 RSCペイロード React Server Component ペイロードサーバーでレンダリングされた情報をシリアライズそれをクライアントで組み立てるクライアントナビゲーションで画面遷移した際は RSC Payload のみクライアントに送信 “use cache” されてない動的要素は RSC で送信される

Slide 29

Slide 29 text

29 use cacheのコンテンツは静的シェルに含められる静的シェルの後に RSCペイロードを送信その間 Suspense の fallbackが表示

Slide 30

Slide 30 text

30 自作した CloudFront + SSG の構成との比較

Slide 31

Slide 31 text

31 同じような目的で自作した構成 ● 1つのNext.jsだけで構成 ● S3 + CFで WEBホスティング ● API Routes で動的要素をAPIで提供

Slide 32

Slide 32 text

32 自作した構成 ● 事前にStatic ExportしたHTML,CSS,JSをS3 + CloudFront で WEBホスティング ● 動的な情報を返却するAPIを提供する App Runner でデプロイ ● 静的なコンテンツはビルドして、動的なコンテンツは useEffect を使ってデータ取得（useEffectの処理はクライアント側で実行される)

Slide 33

Slide 33 text

33 AWSでNext.jsシンプルに動かす構成 ● ALB + Fargate

Slide 34

Slide 34 text

34 自作した構成 ● “use cache” キャッシュされたコンテンツはサーバー上のメモリにキャッシュされる ● キャッシュされたコンテンツもサーバーで処理する ● Cloud Front + S3 の低コストで安定したキャッシュは出来ない

Slide 35

Slide 35 text

35 Vercelで動かすと...? ● おそらく、静的シェルはエッジにキャッシュされる？ ● 高速に動くし、安定稼働は期待できそう...? ● コストは自作より高くなるかも...?

Slide 36

Slide 36 text

36 まとめ

Slide 37

Slide 37 text

37 まとめ ● “use cache” ディレクティブでオプトインのキャッシュができるように ● 1ページに静的、動的なコンテンツが両方あるけど高速表示したい時に使える

Slide 38

Slide 38 text

プロダクトの0→1⽴ち上げ専⾨チーム⼀緒に働く仲間を募集...! モダンな技術スタックを積極採用 ● Hono, V0, Claude Code… 顧客と0距離 ● プリセールス ~MVPリリースまで ● 顧客対応も 2~3名の小規模チームで高速開発 ● 1案件 2~6ヶ月 ● マッハで経験が積める 📢マッハチーム絶賛募集中