【図解で比較】SSR vs CSR — Webページのレンダリング方式を徹底比較

実はページの「組み立て方」には大きく2つの方式があるんだ。サーバー側で完成品のHTMLを作って送る「SSR」と、ブラウザ側でJavaScriptを使って画面を組み立てる「CSR（クライアントサイドレンダリング）」だよ。

初回表示はSSRが有利だね。サーバーが完成済みHTMLを返すから、ブラウザはそのまま表示できる。TTFBからFCP、LCPまでが短いんだ。CSRだと最初に空っぽのHTMLが届いて、そこからJavaScriptをダウンロードして実行して…とステップが多いから、最初の表示は遅くなりがちだよ。

一概にはそう言えないんだ。CSRは2ページ目以降の遷移がめちゃくちゃ速いのが強みだよ。SPAとして動くから、ページ遷移のたびにサーバーへリクエストしなくて済む。アプリっぽいスムーズな操作感が出せるんだ。

SEOはSSRが圧倒的に有利だね。Googleのクローラーは基本的にHTMLを読むから、最初から完成したHTMLが返ってくるSSRは確実にインデックスされる。CSRだとJavaScriptを実行しないとコンテンツが見えないから、クローラーによっては正しく読み取れないリスクがあるんだ。

SSRはリクエストのたびにサーバーでHTMLを生成するから、アクセスが増えるとサーバー負荷が高くなる。CSRはサーバーは静的ファイルを返すだけだから負荷は軽い。これがCSRの大きなメリットの一つだね。CDNとの相性もCSRのほうがいいよ。

そうだよ。まずSSGはビルド時にHTMLを作っておく方式で、SSRの表示速度とCSRのサーバー負荷軽減を両立できる。ISR（インクリメンタル静的再生成）は一定時間ごとにページを再生成する仕組みだね。さらにストリーミングSSRは、HTMLを少しずつ送りながら表示を開始できるから、ユーザーの体感速度がかなり改善されるんだ。

いい質問だね。React Server Components（RSC）はサーバーでしか動かないコンポーネントを定義できる仕組みで、SSRとCSRのハイブリッドをコンポーネント単位で実現するんだ。重いデータ取得はサーバーコンポーネントで、インタラクティブな部分はクライアントコンポーネントで、と使い分けられる。Next.jsのApp Routerがこの方式を全面採用していて、2026年現在のフロントエンド開発のスタンダードになりつつあるよ。

ざっくり言うと、ブログやECサイトなどSEOが重要でコンテンツ中心のサイトはSSRやSSG。管理画面やダッシュボードなどログイン後のアプリケーションはCSR。そして多くの実案件ではハイブリッドが正解で、ページや機能ごとにSSR・CSR・SSGを混在させるのが2026年のベストプラクティスだよ。AstroやNext.jsはまさにそれを簡単に実現するためのフレームワークだね。