KAKAMU
BlogTag

Next.jsのレンダリング方式

そもそも

React Server Componentsの導入により、ReactおよびNext.jsにおけるレンダリング方式に破壊的変更がもたらされた。

それに付随して各種レンダリング方式を表す用語の意味や用法にも破壊的変更がもたらされ、従来の認識があまり有効ではなく（場合によっては有害に）なった。

しかし、その用語の破壊的変更を正確に認識している開発者は2025年初頭時点ではごく稀であり、多くの開発者が従来の認識のまま用語を使い続け、それが誤解や混乱を招くことが予想される。

そこで認識を改めるべく、レンダリング方式およびそれを表す用語を整理する。

（旧）レンダリング方式

React Server Components導入以前の整理。

開発者間の認識のズレはあまりない。

Static Site Generation (SSG)

  • ビルド時にHTMLを生成する方式
  • 更新頻度が低く自動更新が不要なページ（ブログ記事やLPなど）に適する
  • データ取得がビルド時のみ実行されるので、サーバー負荷を軽減できる
  • 生成済みHTMLを返すので、初期表示が高速（CDNにキャッシュされていればなお）

Server-side Rendering (SSR)

  • リクエスト時にサーバーサイドでHTMLを生成する方式
  • ユーザー固有のコンテンツを表示するページや更新頻度が高いページに適する
  • セキュリティ上サーバーサイドでデータを取得しつつ初期表示を高速化したい場合に適する

Incremental Static Regeneration (ISR)

  • SSGとSSRのハイブリッドのような方式
  • ビルド時に（一定数のページを対象に）HTMLを生成しつつ、一定の間隔で再生成する方式
  • ビルド時に生成しないページは、リクエスト時にSSRされ、以降SSG（+再生成あり）扱いになる
  • 再生成される間隔は、revalidateオプションで指定する
  • ビルド対象のページ数が膨大な場合に適する
  • 更新頻度は高くないが定期的に自動更新したいページに適する
  • コンテンツを最新状態に保ちつつ表示を高速化できる

Client-side Rendering (CSR)

  • クライアントサイドでJavaScriptを実行してHTMLを生成・更新する方式
  • いわゆるSPAにおける基本的なレンダリング方式
  • 更新頻度が高いページやユーザー操作に応じて表示が更新されるページに適する
  • 初期表示は遅くなりがち
  • SEO対策が別途必要

（新）レンダリング方式

React Server Components導入以後の整理。

開発者やコンテキストによって意図する意味が異なる。

ここでは主にReactやNext.jsの公式ドキュメントの記述を参考にする。

Static Rendering

  • ビルド時またはrevalidate時にレンダリング（HTMLを生成）すること。SSRの一種。
  • Client Componentsもレンダリングに含まれる。
  • リクエスト時にしか確定しないデータ（ユーザー情報など）に依存しないページに適する。
  • 従来のSSG（Static Site Generation）と概ね同じ。
  • Prerenderingという用語も、ほぼ同義で使用される。
  • 参考：Static Rendering

Dynamic Rendering

  • リクエスト時にレンダリング（HTMLを生成）すること。SSRの一種。
  • ページがStatic RenderingされるかDynamic Renderingされるかは、Next.jsがコードを解析して自動的に判断する。
  • 判断基準は、Dynamic APIs（リクエスト時にしか確定しない値に依存するAPI群）の使用有無と、fetch関数のcacheオプションの値、Route Segment Configの値など。
  • リクエスト時にしか確定しないデータ（ユーザー情報など）に依存するページに適する。
  • Dynamic Routesとは別の概念。
  • 参考：Dynamic rendering

Incremental Static Regeneration (ISR)

  • 使用するAPIや書き方に破壊的変更があるが、概念と機能については従来のISRと概ね同じ。

SSR（Server Side Rendering）

  • 前述のStatic RenderingとDynamic Renderingを包含する、より広義な概念。
  • Server ComponentsをRSC Payload（レンダリングを司る特殊なデータ形式）に変換するプロセスと、Client Componentsも実行してHTMLを生成するプロセスが含まれる。
  • フルページロード時にはSSRしたHTMLを初回レンダリング時に表示した後、クライアントサイドでHydrationを実行する。
  • 参考：Why do Client Components get SSR'd to HTML?

Full Route Cache

  • Full Route Cacheは、Static Rendering時に生成したHTMLとRSC Payloadをサーバーサイドでキャッシュする仕組み。
  • キャッシュされたデータは再ビルドまたはrevalidate時に更新される。

Router Cache

  • クライアントサイド遷移時には、クライアントサイドでコンポーネントツリーおよびDOMを更新して、HTMLを生成する。
  • Router Cacheは、クライアントサイドでHTMLを生成するのに必要なRSC Payloadをブラウザのメモリにキャッシュする仕組み。
  • 必要なRSC Payloadがキャッシュされていない時は、随時サーバー側にRSC Payloadをリクエストする（Networkタブで確認できる）。

Streaming

  • ページ全体のHTMLが生成されるのを待つことなく、生成したHTMLを順次クライアントサイドへ送信すること。
#IT