Next.jsを触っていると、SSG / SSR / CSR という言葉が必ず出てきます。

最初は「結局どれも画面が表示されるなら同じでは？」と思っていましたが、実際は “いつ・どこでHTMLを作るか” が違い、そこから 表示速度・SEO・サーバー負荷・実装の考え方 まで変わってきます。

この記事では、Next.jsの3つのレンダリング方式（SSG、SSR、CSR）について、特徴と使い分けを自分なりに整理します。

ざっくり言うと、違いはこれです。

• SSG：ビルド時にHTMLを作っておく（先に作り置き）
• SSR：リクエストのたびにサーバーでHTMLを作る（毎回作る）
• CSR：最初は空に近いHTMLを返して、ブラウザでJSが描画する（後から作る）

つまり「HTMLがいつ生成されるか」がキモです。

特徴

• ビルド時にページのHTMLを生成して、静的ファイルとして配信する方式
• CDNに載せやすく、表示が速い
• HTMLが最初からあるので、SEOにも強い
• ただし、内容を更新したい場合は 再ビルドが必要（またはISRで補う）

向いているケース

• 変更頻度が高くないページ
• ブログ記事、ドキュメント、会社概要、LP など

イメージ

「完成品を倉庫に置いておいて、注文が来たら即渡す」みたいな感じです。

特徴

• アクセスされるたびにサーバーがHTMLを生成する方式
• ユーザーごとに内容を変えたい（ログイン情報、権限、地域など）時に強い
• ただし毎回サーバーで作るので、負荷が増えやすい
• レスポンス速度も、SSGよりは不利になりがち（設計次第）

向いているケース

• 「常に最新」が重要なページ
• ユーザーごとに内容が変わるページ
• ECの在庫・価格が頻繁に変わるページ、管理画面の一覧 など

イメージ

「注文が来たら、その場で料理して提供する」感じです。

特徴

• 最初に返ってくるHTMLはシンプル（場合によってはほぼ空）
• その後、ブラウザでJavaScriptが動いてデータを取りに行き、画面を作る
• 画面の切り替えがスムーズで、アプリっぽい体験にしやすい
• ただし、初回表示はJSの読み込みがある分遅くなることがある
• SEOは工夫が必要（最近は改善されているが、基本的にSSG/SSRより考慮点が多い）

向いているケース

• ログイン後に使うダッシュボード（SEO不要）
• 画面操作が中心のWebアプリ
• フィルタや検索など、ユーザー操作が多いUI

イメージ

「材料だけ渡して、調理は客の席（ブラウザ）でやってもらう」感じです。

判断基準をシンプルにすると、こうなります。

① SEOが必要で、内容があまり変わらない → 

SSG

• ブログ記事、LP、サービス紹介など

② SEOが必要で、内容が頻繁に変わる or ユーザーごとに変わる → 

SSR

• 最新情報が重要、ログイン状態で表示が変わるページなど

③ SEOより操作体験が重要 → 

CSR

• 管理画面、ダッシュボード、社内ツールなど

• SSG：ビルド時にHTML生成 → 速い・SEO強い（更新は再ビルド）
• SSR：リクエストごとにHTML生成 → 常に最新・ユーザー別表示に強い（負荷増）
• CSR：ブラウザで描画 → 操作が快適（初回表示とSEOに注意）

Next.jsを使う上で大事なのは「どれが正解か」ではなく、

ページごとに最適なレンダリングを選ぶことだと思いました。