SSRとCSRの違いとは？描画方式の基礎

描画方式とは何か

描画（レンダリング）とは、データやテンプレートから実際に画面に出すHTMLを組み立てる処理のことです。この組み立てをどこで行うかによって、SSRとCSRに大きく分かれます。

SSRはServer Side Rendering（サーバーサイドレンダリング）、CSRはClient Side Rendering（クライアントサイドレンダリング）の略です。どちらが優れているという話ではなく、それぞれ得意な場面が異なります。

SSR（サーバー描画）の仕組み

SSRでは、ユーザーがアクセスした時点でサーバー側が完成したHTMLを組み立て、それをブラウザに送ります。ブラウザは受け取ったHTMLをそのまま表示すればよいので、最初の画面が出るのが速くなります。

また、完成済みのHTMLが届くため、検索エンジンが内容を読み取りやすいのも特徴です。一方、アクセスのたびにサーバーが組み立てるため、サーバーの負荷は高くなりやすい傾向があります。

実務ではどこで関係する？

SSR CSR 違いは言葉の意味だけ覚えても、HTML共有の判断にはつながりません。実務では「表示に関係する話か」「検索に関係する話か」「アクセス制限に関係する話か」を分けて考えると整理しやすくなります。

SSRとCSRについて迷ったら、相手が安全に開けるか、検索に出してよいか、ブラウザや環境差で壊れないかを順番に確認します。用語理解は、その判断を早くするための道具として使います。手順が決まったら、HTML/ZIPをアップロードして共有URLを発行し、相手に確認してほしい観点と期限を添えて送ります。

• 表示の話: HTML/CSS/JS、パス、ブラウザ互換性を確認する
• 検索の話: noindex、canonical、sitemap、robots.txtの役割を分ける
• 制限の話: URL共有、パスワード、メール認証、会社ドメイン認証を混同しない
• 運用の話: 期限、差し替え、削除、共有メッセージまで決める

CSR（クライアント描画）の仕組み

CSRでは、サーバーは最小限のHTMLとJavaScriptだけを送り、画面の組み立てはブラウザ側のJavaScriptが行います。SPAの多くがこの方式を採用しています。

最初にJavaScriptを読み込んでから描画するため、初期表示は遅くなりがちですが、その後の操作はなめらかです。検索エンジンが内容を読み取りにくい場合がある点はSSRと対照的です。

SSRとCSRの使い分け

両者の違いを踏まえると、目的に応じた選択ができます。検索流入や初期表示の速さを重視するならSSR、操作の快適さやアプリ的な体験を重視するならCSRが向きます。

判断の流れを示します。

1. 検索からの流入を重視するかを確認する。重視するならSSR寄り。
2. 最初の表示の速さが重要かを確認する。重要ならSSR寄り。
3. 操作のなめらかさやアプリ的体験を重視するならCSR寄り。
4. 両方ほしい場合はSSRとCSRを組み合わせる構成も検討する。

描画方式と確認用の共有

どちらの方式でも、完成した画面を関係者に見せて確認をもらう工程は共通です。とくに静的に書き出したHTMLは、そのまま表示確認をしてもらいやすい形です。

ギガサイト便はHTMLやZIPをドロップすると 〇〇.giga-site.com のURLを発行し、CDNのエッジ配信で速く表示できます。本番のWebサーバー運用ではなく、組み上がった画面を一時的に共有して確認・レビューしてもらう用途に向いています。