Domain 130 / 225
JS レンダリング戦略は SSR / SSG / ISR / CSR の使い分けが SEO に直結
Rendering 戦略 の要点
JS フレームワークでは SSR（サーバ側生成）/ SSG（ビルド時生成）/ ISR（再生成）/ CSR（クライアント側生成）から選択。SEO 評価は SSR / SSG が安定、CSR は Googlebot が JS 実行できるが信頼性は劣る。コンテンツの更新頻度・規模で選ぶ
なぜこれを学ぶか
JS フレームワーク採用時に レンダリング戦略の選択ミスで SEO が壊れる事故が頻発。 Next.js / Nuxt / SvelteKit ユーザーは必須知識。
JS フレームワーク使用サイトで必須。
学ばないと起きること
| よくある事故 | 被害 |
|---|---|
| CSR のみで SEO 期待 | Googlebot で JS 失敗のリスク |
| SSG で動的コンテンツ | データ更新が遅延 |
| ISR の revalidate 設定ミス | 古い情報が残る |
学ぶメリット
- レンダリング戦略の的確な選択
- SEO・パフォーマンス両立
- 商談で「SSR vs SSG vs ISR vs CSR」を即答
仕組み
レンダリング戦略の比較
| 戦略 | 生成タイミング | SEO | 速度 | 動的性 |
|---|---|---|---|---|
| SSG | ビルド時 | ◎ | ◎ | × |
| SSR | リクエスト毎 | ◎ | △ | ◎ |
| ISR | 初回 + 再生成 | ◎ | ◎ | ◯ |
| CSR | クライアント | △ | △ | ◎ |
SSG（Static Site Generation）
公式: 最速・最 SEO 友好的。
- ビルド時に全ページ HTML 生成
- CDN 配信で超高速
- 動的データには非対応
向き: ブログ / ドキュメント / LP
SSR（Server-Side Rendering）
リクエスト毎にサーバで HTML 生成:
- 動的データ対応
- Googlebot に確実な HTML 配信
- TTFB は SSG より遅い
向き: ユーザー固有 / 頻繁な更新
ISR（Incremental Static Regeneration）
公式: SSG と SSR のハイブリッド（Next.js 機能）:
- 初回はキャッシュ済み HTML 配信
- バックグラウンドで再生成
- revalidate 期間で更新頻度制御
向き: EC / メディア（中規模更新頻度）
CSR（Client-Side Rendering）
ブラウザで JS 実行して HTML 生成:
- Googlebot は JS 実行可能だが遅延
- インデックス時にスナップショット
- SEO 評価は SSR / SSG より不安定
向き: SaaS の管理画面 / 認証後ページ
キー概念
Googlebot の JS 実行
公式: Googlebot は Chromium 最新相当の JS 実行能力:
- ES2019+
- 一般的な JS フレームワーク対応
- ただし JS 実行はクロールバジェット消費
- 失敗時はインデックスされない
Hybrid Rendering
ページごとに戦略を分ける:
- /blog/[slug] → SSG（記事は静的）
- /products → ISR（商品 LP は中頻度更新）
- /dashboard → CSR（認証後 SPA）
- /api → SSR（動的応答）
Next.js App Router で実現。
Streaming SSR
公式: React 18 / Next.js 14+ の最新機能:
- HTML を段階的に生成 → ストリーミング配信
- 重い部分を遅延読み込み
- LCP / TTFB 両方改善
よくある誤解
| よくある誤解 | 実際のところ | 出典 |
|---|---|---|
| CSR でも SEO 完璧 | Googlebot 失敗リスクあり、SSR / SSG が安定 | JavaScript SEO 基礎 |
| SSG が常にベスト | 動的データ非対応、ISR / SSR を併用 | Next.js Rendering |
実務での適用
戦略選択フロー
動的データなし → SSG
ユーザー毎の更新あり → SSR
中頻度更新（数分〜数時間） → ISR
完全 SPA / 認証後 → CSR（SEO 不要部分）
Next.js App Router での実装
| ファイル / 設定 | 戦略 |
|---|---|
| デフォルト | SSG（静的最適化） |
| dynamic = 'force-dynamic' | SSR |
| revalidate = 3600 | ISR（1 時間） |
| 'use client' のみ | CSR |
トラブル別の対処
| 症状 | 確認すべきこと |
|---|---|
| CSR ページがインデックスされない | SSR / SSG への移行 |
| ISR で古い情報残る | revalidate 期間 / on-demand revalidate |
公式ソース
自己テスト
Q1. SSG / SSR / ISR / CSR の特徴一覧は？
SSG はビルド時静的、SSR はリクエスト毎、ISR は両者のハイブリッド、CSR はブラウザ生成
Q2. SEO で最も安定するレンダリング戦略は？
SSG または SSR。CSR は Googlebot 失敗リスクあり
Q3. EC サイトで適切なレンダリング戦略は？
商品ページは ISR（中頻度更新）+ カートは CSR + チェックアウトは SSR のハイブリッド
これらの内容を採点付きで挑戦したい場合は、本ドメインのプロ試験で 5 問形式で確認できる。