SSG と SSR の違い

それぞれのレンダリング方式の特徴と、Nuxt での使い分けを整理します。

レンダリング方式の比較

方式	タイミング	SEO	向いているページ
CSR	ブラウザで描画	弱い	管理画面・ダッシュボード
SSR	リクエスト時にサーバーで描画	強い	動的コンテンツ・ユーザー固有ページ
SSG	ビルド時に静的 HTML を生成	最強・高速	ブログ・LP・ドキュメント
ISR	ビルド後も一定時間ごとに再生成	強い・更新可能	頻繁に更新される記事

Nuxt での設定方法

Nuxt はデフォルト SSR です。routeRules を使うとページごとに切り替えられます。

// nuxt.config.ts
export default defineNuxtConfig({
  routeRules: {
    '/articles/**': { prerender: true }, // SSG
    '/dashboard/**': { ssr: false },     // CSR（SPA）
    '/news/**': { isr: 3600 },           // ISR（1時間ごとに再生成）
  }
})

SSR を確認する方法

ブラウザの「ページのソースを表示」を開いて、記事本文が HTML に含まれていれば SSR（または SSG）が正しく動作しています。CSR の場合、JS 実行前は空の <div> しか存在しません。

まとめ

ブログ・ドキュメント → SSG（速くて SEO 最強）
EC サイト商品ページ → ISR（キャッシュしつつ鮮度を保つ）
ニュースフィード → SSR（常に最新を返す）
管理画面 → CSR（SEO 不要・インタラクション重視）