はじめに
Next.js（App Router）を勉強していると，
- Static Rendering（スタティックレンダリング）
- Dynamic Rendering（ダイナミックレンダリング）
- Server Component（サーバーコンポーネント）
- Client Component（クライアントコンポーネント）
が同時に出てきて，「なんの話してたっけ」「何がどう違うんだっけ」と毎回混乱しているような気がします．
この記事では，この2つを“別の軸”として分離して整理していきます．
1. 混乱の原因
混乱の原因は単純で，
- Static / Dynamic → レンダリング方式の話
- Server / Client → コンポーネントの実行場所の話
なのに，同じ文脈で語られることが多いからです．
まずはこの2つを明確に分けます．
2. Static Rendering / Dynamic Rendering とは何か
これらは「いつHTMLを生成するか」の話です．
Static Rendering
- ビルド時 or 一定時間後など再生成時にHTMLを作る
- 事前に用意されたHTMLを配信
実現手段の例
- SSG（ Static Site Generation ）
- ISR（ Incremental Static Regeneration ）
特徴
- 表示が速い
- サーバー負荷が低い
- データは少し古くなる可能性あり
Dynamic Rendering
- リクエストごとにHTMLを生成
- 毎回サーバーで処理が走る
実現手段の例
- SSR（ Server Side Rendering ）
特徴
- 常に最新のデータ
- サーバー負荷が高い
- 表示は遅め
補足：なぜこの話にCSRは出てこず，SSRは含まれるのか
Static Rendering / Dynamic Rendering は， サーバーがHTML（ページ）を「いつ」生成するか を分類する概念です．
CSRは
初期表示に必要な UI をクライアント（ブラウザ）が JavaScript によって構築する方式であり，
サーバーが完成した HTML を生成して返すことを前提としません．
そのため， 「サーバーが HTML をいつ生成するか」を分類する
Static / Dynamic Rendering の枠組みには含まれません．
一方，SSRは
サーバーがHTMLを生成する方式であり，
その生成タイミングが「リクエスト時」なので，
Dynamic Rendering に含まれます．
そのため，
- CSRはこの分類には登場せず
- SSRは Dynamic Rendering の一種として登場する
という関係になります．
3. Server Component / Client Component とは何か
これらは「どこで実行するか」の話です．
Server Component
- サーバー上で実行される
- DBアクセスやAPIキーが使える
- ブラウザにJSが送られない
用途
- データ取得
- レイアウト
- 記事本文
Client Component
- ブラウザで実行される
- useState / onClick などが使える
- JSバンドルが送られる
用途
- フォーム
- モーダル
- タブ切り替え
- フィルタUI
4. 実際は何で決まるのか（App Router）
レンダリング方式は主に以下の要素によって決まります．
-
fetchのcache revalidate-
cookies()やheaders()の使用
などで決まります．（結果として，データのキャッシュ戦略にも影響します）
// Static Rendering
fetch(url, { cache: "force-cache" })
// Dynamic Rendering
fetch(url, { cache: "no-store" })
一方でコンポーネントの実行場所（種類）は
"use client";
があるかどうかで決まります．
5. よく混同すること
Server Component と SSR/SSG/ISR の関係
- Server Component は サーバーでJSが実行されるコンポーネント
- 実行すると RSC（React Server Component）ペイロード に変換される
- SSR / SSG / ISR は ページ単位で HTML を生成するタイミングと再生成戦略 の話
- Server Component 自体が SSR/SSG/ISR を決めるわけではない
- ただし，Server Component を含むページは，結果としてページ単位で SSR / SSG / ISR のいずれかの挙動になる
Client Component と CSR の関係
- Client Component はブラウザで JavaScript が実行されるコンポーネント
- ただし App Router では初期表示時に Client Component が返す JSX も含めてサーバーで一度レンダリングされ，HTML として送信される
- その HTML がブラウザに送られた後，Client Component の JavaScript が読み込まれて hydrate され，インタラクティブに振る舞う
- そのため，「ページ全体が CSR になる」というよりは，初期表示は SSR / SSG / ISR などで行われ，その後，Client Component の一部（JavaScript）だけがクライアントで動く と考える方が正確である
6. まとめ
- Static / Dynamic = 「いつ」の話
- Server / Client = 「どこで」の話
- コンポーネント単位の話なのか，ページ単位の話なのかを区別すべし
おわりに
Next.jsは，Rendering戦略，Componentの実行場所，Streaming / PPRなど複数の最適化が重なっているため，
「なんの話をしているのか」を理解しながら整理していく必要がありそうです．
また，Partial Pre Rendering（PPR）というものも出てきているということで，この辺りも今後抑えていきたいですね．