はじめに

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）というものも出てきているということで，この辺りも今後抑えていきたいですね．

参考