🔰

【初心者】サーバーサイドレンダリング (SSR)とクライアントサイドレンダリング（CSR）とは

に公開
初心者
SSR
CSR
レンダリング
よく聞く
tech

🔰こちらよく聞くワードではあるものの、概念的理解が弱い状態なので備忘録的にまとめてみました。

そもそもレンダリングとは？

Webページが表示されるとき、ブラウザは「画面に何をどう描くか」を決めて、実際に表示します。この 画面を描き出す処理 を レンダリング（Rendering） と呼びます。

レンダリングのイメージ

HTML / CSS / JavaScript
          ↓ （解釈する）
ブラウザのレンダリングエンジン
          ↓ （描画する）
画面に表示される

ブラウザ（Chrome / Safari / Firefox など）は、受け取ったコードをただの文字として扱うのではなく、 それを「どんな見た目にするか」を計算して画面を作っています。

どこで行われるのか？

レンダリングには大きく2つの場所の考え方があります：

種類 どこで表示用HTMLを作る？ 表示までの流れ
サーバーサイドレンダリング (SSR) サーバー サーバーが完成したHTMLを送る → ブラウザが表示する
クライアントサイドレンダリング (CSR) ユーザーのブラウザ シンプルなHTMLとJSを受け取る → ブラウザが中でHTMLを作る

次にこの２つの違いを比べてみます

サーバーサイドレンダリング（SSR）

ユーザー → サーバー（HTMLを生成）→ 完成したHTML → ユーザーの画面
  • 要点
    • サーバーが表示に必要なHTMLを あらかじめ作ってから送る
    • ブラウザは届いたHTMLを そのまま表示するだけ
  • メリット
    • 初期表示が速い
    • SEO（検索エンジン）に強い
  • デメリット
    • ページ遷移のたびに再読み込みが必要

クライアントサイドレンダリング（CSR）

ユーザー → サーバー（最低限のHTML + JS）→ JSが動く → 画面を作る
  • 要点
    • HTMLを ブラウザ側で作る
    • JavaScriptがページの中身（コンテンツ）を構築する
  • メリット
    • ページ遷移がなめらか（アプリのような操作感）
  • デメリット
    • 初期表示が遅くなりやすい（JSが動くまで画面が空）
    • SEO対策が必要

比較

比較項目 SSR（サーバーサイドレンダリング） CSR（クライアントサイドレンダリング）
初回表示速度 速い（最初から完成HTMLが届く） JSの読み込み後に描画 → 遅くなりがち
SEO（検索エンジン対策） 強い（検索エンジンはHTMLを読める） 弱いことがある → 対策が必要（例：SSR・プリレンダリング併用）
サーバー負荷 高め（毎回HTMLを生成） 低め（基本はブラウザが描画）
ページ遷移の快適さ リロードが入ること多い SPA 化できればサクサク動く
開発の複雑さ 比較的シンプル 状態管理・描画などが必要 → 複雑になりやすい
向いているケース ブログ / EC / LP / SEO必要なサイト SNS / ダッシュボード / Webアプリ / 管理画面
主な例 Laravel + Blade / Next.js SSR / Nuxt SSR Vue + SPA / React SPA / Nuxt SPA
ユーザーによって動きが変わるUI やや弱い 強い（動的UIに最適）

どちらがいいか？

🔍 具体例

  • SSR 向き

    • 企業サイト
    • 商品販売サイト（SEOが大事）
    • 「最初の表示が速く見える」ことが重要なサイト
      → ユーザーが来る → すぐ見れる → 理解 → 離脱しにくい

  • CSR 向き

    • Slack / Notion / Figma みたいな「操作する」アプリ
    • 管理画面（フィルター・タブ・モーダル操作が多い）
    • SPAで画面遷移を速くしたいとき
      → ページを触りながら情報を動的に扱う体験が強い

もしくは必要に応じて SSR + CSR を使い分けるハイブリッド型なんてのも場合によってはいいのかも？🧐

✨ 超ざっくりまとめ

要点 選ぶべき方式
SEOが大事 / 表示が速く見えてほしい SSR（または SSG）
操作性が大事 / UIが動くアプリ CSR
どっちも欲しい Next.js / Nuxt などの SSR + CSR ハイブリッド

備考

記事をまとめてみたもののまだ言葉は知っている / なんとなく説明はできるが、仕組みを深くは説明できない状態から少しレベルアップしたぐらいの感覚、、このへんはどうすれば理解深まるのだろうか。。。

レンダリングにはまだ他にも

  • SSG（スタティック・サイト・ジェネレーション）
  • ISR（インクリメンタル・スタティック・リジェネレーション）
    などもありますがまだまだ理解できていないのでまたの機会に。

Discussion