Next.js 16で導入されたCache Componentsについて、従来のApp Router(Next.jsのファイルベースのルーティング機構)が抱えていた制約とその解決策を整理した記事です。従来はcookies()やheaders()といった動的APIをページ内で1箇所でも使うと、ルート全体が毎リクエストのサーバーレンダリングに切り替わる仕様でした。Cache Componentsでは、コンポーネント先頭に"use cache"という指示を書き、PPR(Partial Prerendering、静的部分と動的部分を組み合わせた事前レンダリング)を土台にすることで、静的な部分と動的な部分を単一レスポンス内でストリーミング配信できるようになりました。
具体的には、cacheLife("hours")でキャッシュの有効期間を、cacheTag("featured-posts")のようなタグで制御を指定でき、動的な部分は<Suspense>で明示的に囲みます。
著者はSWR(データ取得を行うためのReactライブラリ)を使ったCSR(クライアントサイドレンダリング)、Astro Server Islands、Cache Componentsの3手法を比較しています。SWR(CSR)方式はUIの組み立てをブラウザ側で行うため往復が発生し、クライアントJSはコンポーネント一式が必要です。Astro Server Islands方式はサーバー側(別リクエスト)で組み立てるため往復は残りますが、クライアントJSは差し替え用スクリプトのみで済みます。Next.js Cache Components方式はサーバー側(同一レスポンス)で組み立てるため往復がなく、クライアントJSも差し替え用スクリプトのみで足ります。動的要素が数個程度ならCSR+SWRで十分ですが、パーソナライズされた価格や在庫、レコメンドなど動的要素が多いページではCache Componentsが有益になり得ると述べています。
出典が伝えている要点
- 従来のApp Routerでは、cookies()やheaders()などの動的APIを1箇所でも使用するとルート全体が毎リクエストのサーバーレンダリングに切り替わる仕組みだった
- Cache Componentsでは、コンポーネント先頭に"use cache"という指示を記述する
- Cache ComponentsではcacheLife("hours")でキャッシュの有効期間を制御できる
- Cache ComponentsではcacheTag("featured-posts")のようなタグでキャッシュを制御できる
- Cache ComponentsはPPR(Partial Prerendering)を土台としている
- PPRにより静的な部分と動的な部分を単一レスポンス内でストリーミング配信できる
- 動的な部分は<Suspense>で明示的に囲む
- SWR(CSR)方式ではUIの組み立てがブラウザで行われ、往復があり、クライアントJSはコンポーネント一式が必要
- Astro Server Islands方式ではUIの組み立てがサーバー(別リクエスト)で行われ、往復があり、クライアントJSは差し替え用スクリプトのみで済む
- Next.js Cache Components方式ではUIの組み立てがサーバー(同一レスポンス)で行われ、往復がなく、クライアントJSは差し替え用スクリプトのみで済む
- 著者は動的要素が数個程度ならCSR+SWRで迂回すればよいと述べている