アクセスのたびに、サーバが動的データを取得して HTML を組み立て、完成品を返します。ブラウザはそのまま表示できるため、初期表示が速く、SEO（検索エンジン最適化）にも有利です。
技術用語
408
SSR
エスエスアール
体験区分：少しだけ触った
推奨読者レベル：Level 2-4
何をしてくれるか
どこで出会うか
Next.js や Nuxt、SvelteKit の設定で「SSR / SSG / CSR」の選択肢として登場します。AI でサイトを生成する際も方式選択の場面で行き着きます。
イメージ
開発フローでの位置
要件定義
方式選定
フレームワーク設定
サーバ構築
デプロイ
2026.04·needs_review
「動的データの多い画面は SSR、ブログ記事は SSG。Next.js なら共存できます。」
SSRの見方
409
この用語の見どころ
1
役割
リクエストごとにサーバで HTML を組み立て、完成品を返します。
2
うれしさ
初期表示が速く、SEO クローラが HTML をそのまま読めます。
3
注意点
サーバ負荷が高く、インフラ運用コストが増えることがあります。
4
どこで役立つか
動的データが多いダッシュボードや EC サイトに向いています。
5
はじめに
SSR / SSG / CSR を「いつ HTML を作るか」の時間軸で区別します。
6
深掘り先
SSG（F-162）、Next.js（F-11）、ISR
非エンジニアのつまずき
- SSR・SSG・CSR の使い分けが似た略語で並び、頭が混乱しやすいです。
- 速度・コスト・体験の違いをベストプラクティスに結び付けるのが難しいです。
- 名前と挙動を結び付けて話せるレベルに到達するハードルが高めです。
私のコメント
- 第一印象:誰に処理させるかが体験とコストに直結する、と知った時に納得しました。
- 良い点:初期表示が速く、SEO にも有利な点で動的サイト向けに頼れます。
- ダメな点:サーバ運用コストが乗るため、使い所を考えないと負担が大きくなります。
- 誰向けか:動的サイトを本気で運用する人向けで、個人は SSG に寄せがちです。
関連用語
備考
SSR / CSR / SSG / ISR の頭文字略称が並立して混乱しやすいため、本エントリでは「いつ HTML を作るか」という時間軸での区別を軸に説明する Next.js は SSR・S…
F-161·term_tool
バイブコーディング図鑑