定義
フロントエンドレンダリングとは、WebページのHTMLを「どこで・いつ・どのように生成するか」を決める設計手法の総称です。ECサイトにおいては、商品ページやカテゴリページがどのくらい速く表示されるか、Googleにどう評価されるか、ユーザーがストレスなく購入できるかを左右する、極めてビジネス直結度の高い技術領域です。
主な方式は以下の5つです。
- CSR（Client-Side Rendering）：ブラウザ側でJavaScriptがHTMLを生成
- SSR（Server-Side Rendering）：リクエストごとにサーバーでHTMLを生成
- SSG（Static Site Generation）：ビルド時にHTMLを事前生成
- ISR（Incremental Static Regeneration）：静的生成＋バックグラウンドで再生成
- ストリーミングSSR / RSC：部分ごとに順次配信
类比（たとえ話）
レンダリング方式は「飲食店の提供スタイル」に似ています。
- CSR = 客が席についてから調理開始。店内は最新設備だが、最初の一品が出るまで待たされる。
- SSR = 注文が入るたびに厨房が調理。常に新鮮だが、混雑時は提供が遅れる。
- SSG = 作り置きの弁当。開店と同時に即提供。ただしメニュー変更は翌日以降。
- ISR = 作り置きしつつ、裏で新しいロットに差し替え。古い在庫を出しつつ鮮度も保つ。
ECでいえば、トップページや特集ページはSSG、商品詳細ページはISR、カート・マイページはCSRというハイブリッド構成が現在の主流です。
公式（パフォーマンス指標）
レンダリング方式の良し悪しは、以下の指標で測ります。
LCP（Largest Contentful Paint） = 主要コンテンツが描画されるまでの時間 目標値：2.5秒以下（Google Core Web Vitals基準） TTFB（Time To First Byte） = サーバーが最初の1バイトを返すまで SSG：50〜200ms / SSR：200〜800ms / CSR：ほぼ0ms（ただし描画は遅い） CLS（Cumulative Layout Shift） = レイアウトのズレ累積 目標値：0.1以下 INP（Interaction to Next Paint） = 操作への応答速度 目標値：200ms以下
コンバージョンへの影響（実測データ）
- LCPが1秒遅延するごとにCVRは約7%低下（Deloitte調査）
- モバイル表示が3秒を超えると53%のユーザーが離脱（Google調査）
- Core Web Vitals合格サイトは不合格サイトよりCVRが平均24%高い（Google事例）
比較表
| 方式 | 初回表示速度 | SEO | サーバー負荷 | 向いているページ | 代表FW |
|---|---|---|---|---|---|
| CSR | 遅い（2〜5秒） | 弱い | 低 | マイページ・カート | React SPA |
| SSR | 中（1〜2秒） | 強い | 高 | 検索流入狙いの商品ページ | Next.js, Nuxt |
| SSG | 最速（0.5秒以下） | 最強 | 最低 | トップ・特集・LP | Astro, Next.js |
| ISR | 速い（0.5〜1秒） | 強い | 中 | 商品詳細・在庫変動ページ | Next.js |
| ストリーミング | 速い | 強い | 中 | 大量商品一覧 | Next.js RSC |
応用シーン（EC別）
1. DTC単一ブランドサイト
トップとブランドストーリーはSSG、商品詳細はISR、カートはCSR。Shopify HydrogenやNext.js Commerceが定番構成です。
2. 大量SKUのマーケットプレイス
カテゴリページはISR＋ページネーション、検索結果はSSR。1万SKUを超えるとSSGはビルド時間が爆発するため、ISRかオンデマンド再生成が必須です。
3. グローバルEC
ロケール別にSSGし、CDNで配信。為替・在庫はクライアント側でハイドレーション後に更新するハイブリッド型が有効です。
4. 会員制・サブスクEC
ログイン後画面はCSR、ランディングはSSG。パーソナライズはEdge Middlewareで分岐させます。
よくある誤解
❌「SSRにすればSEOは完璧」
→ SSRでもメタタグや構造化データが不適切なら順位は上がりません。Product構造化データ＋ canonical＋hreflangの三点セットが別途必要です。
❌「CSRはSEOに弱いから全部SSRにすべき」
→ カートやマイページをSSRにするとサーバーコストが跳ね上がり、TTFBが悪化します。ページ特性ごとに使い分けるのが正解です。
❌「ISRは常に最新」
→ revalidate秒数だけ古い情報が残ります。在庫切れ表示のズレはCVR直結のクレーム要因。revalidate: 60など短め設定＋オンデマンド再生成を併用しましょう。
❌「ハイドレーションは無料」
→ ReactのハイドレーションはCPUを食い、INPを悪化させます。アイランドアーキテクチャやRSCで必要部分だけ動かす設計が2024年以降の標準です。
関連术语
- Core Web Vitals：GoogleのUX指標。LCP・CLS・INP
- ハイドレーション：SSR済みHTMLにJSで動きを与える処理
- アイランドアーキテクチャ：必要な部分だけJS化する設計
- Edge Rendering：CDNエッジでSSRする方式
- RSC（React Server Components）：サーバー側でコンポーネントを実行
- TTFB / LCP / INP / CLS：パフォーマンス4大指標
- CDNキャッシュ：SSG/ISRの高速配信を支える基盤
まとめ：フロントエンドレンダリングは「技術選定」ではなく「CVR設計」です。ページの役割ごとにCSR・SSR・SSG・ISRを組み合わせ、LCP 2.5秒以下・CLS 0.1以下を死守することが、DTC・EC事業の売上を直接押し上げます。
