SSR（サーバーサイドレンダリング）とは？仕組みとSPAとの違いを2分で解説
2025.7.4 2026.6.15
2025.7.4 
2026.6.15 この記事は約2 分で読めます
Next.jsでも使われるサーバー・サイド・レンダリング。
何が新しく、何がデメリットなのか？
図解で分かりやすく紹介します。
筆者三好アキ（専門用語なしでプログラミング）
私について詳しくは → 自己紹介
SPAからSSRへ
前回の記事では「SPA（シングル・ページ・アプリケーション）」を紹介しました。
そしてSPAには、「ページの初回表示に時間がかかる」という問題があることにも触れました。
「からっぽのHTMLファイル（index.html）」と、大量のJavaScriptをクライアントに送ること、そしてページをJavaScriptで組み立てるプロセス、この2つに時間がかかるからです。
SPAの仕組みを図にしたものが下図です。
ここを改善したものが、本記事で紹介する「SSR（サーバー・サイド・レンダリング）」です。
| 登場時期 | |
|---|---|
| MPA（マルチ・ページ・アプリケーション） | SPA以前（2000年ごろ） |
| SPA（シングル・ページ・アプリケーション） | 2010年ごろ |
| SSR（サーバー・サイド・レンダリング） | 2016年ごろ |
SSRの仕組み
SSRの仕組みを示したものが次図です。
SSRでは初回リクエストがあったとき、HTMLを一部だけすばやく組み立て、これとJavaScriptを送り返します。
送っているものだけを見ると、SPAと同じ「HTML + JavaScript」ですが、このHTMLファイルはSPAのような「からっぽ」のものではなく、サーバー側で一部組み立てたもので、最低限必要なデータが含まれたものです。
クライアント（ブラウザ）は「一部組み立てたHTMLファイル」を直ちに表示することができるので、ユーザー体験はよくなります。
「一部組み立てたHTML」のコード例
SPAのHTMLファイルとは異なり<body>タグ内にブラウザで表示できるものがある、つまり「からっぽ」ではないのがわかります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="description" content="ゲストさん、こんにちは" />
<title>SSR</title>
</head>
<body>
<div id="app">
<h1>ようこそ！</h1>
<p>こんにちは、<span id="username">ゲスト</span> さん。</p>
</div>
<script type="module" src="/main.js"></script>
</body>
</html>とはいえこの時点ではまだ、ブラウザに映っているページは完全なものではありません。
サーバーから送られたJavaScriptを使って、ページを完全なものに組み立てる作業が残っています。
この作業は主に<button>や<form>といったユーザーとのやりとりが発生するところにJavaScriptをつないでいく工程で、「ハイドレーション」と呼ばれます。
(*ハイドレーションとは「水分補給」という意味です。サーバーから送られてきた「乾いたHTMLの骨組み」に、ダイナミックな機能を付与するJavaScriptを与えて「フレッシュで生気みなぎるもの」へと変えるイメージになります。)
SPAとSSRは一緒に使える
ひとつ覚えておいて欲しいことがあります。
SPAとSSRの最大の違いは初回表示時の仕組みだけであり、基本的にはSSRもハイドレーションが済んだあとにはSPAになることです。
SSRを使っても、ページ移動時にサーバーとのやりとりは行われず、JavaScriptでページを描画します。
このようにSPAとSSRの関係は、「SPAの後継がSSR」、「SPAの進化版がSSR」という直列的なものではなく、並列的、あるいは相互補完的なものなのです。
さて、すでに気がついた人もいると思いますが、SSRを使っても「クライアントが使うJavaScriptをとにかくすべて送る」という点は同じです。
この部分に手を加えたものが、次に紹介するRSC（Reactサーバー・コンポーネント）になります。
なお、SSRを実際の開発で使うには、Next.jsを使うのが現実的です。
Next.jsの全体像と使い方はこちらのガイドにまとめています▼
MPA・SPA・SSR・RSCの流れ全体と、React 19の新機能（useActionState、useOptimisticなど）まで体系的に理解したい方は、こちらのガイドもあわせてご覧ください▼
レンダリングの用語は分かってきましたが、学習の進め方に迷います
SSRのような仕組みを理解できても、React学習の全体の中で次に何をすべきかは見えにくくなります。
今の状況を教えていただければ、次に何をすればいいか、どう進めていけばいいかを個別にお答えします。
「この進め方で合っているのかな？」という確認だけでも大丈夫です。
下のフォームからご連絡いただければ、三好アキが直接、目を通してお返事します（無料）。
送信が完了しました
お答えいただきありがとうございます。いただいたメールアドレス宛に確認のメールをお送りました。後ほど、三好アキより個別にお返事いたします。
学習のお悩み相談
プログラミング学習で今つまずいていること、困っていること......あなたの状況に合ったアドバイスを無料でご提供します。
次に読みたい記事特集
Next.js入門の決定版｜順番に読む7記事
- 1
【2026年版】Next.js完全スタートガイド｜初心者向けにすべて解説 - 2
React × TypeScript最強教材の2年間を振り返る（構想5年の歩み） - 3
【2026年版】React + ViteとNext.js、どちらを選ぶべきか？ 用途別の選び方を分かりやすく解説 - 4
【Next.js × TypeScript】3分で使えるようになる入門ガイド（2026年版） - 5
SPAとは？シングルページアプリケーションの仕組み・MPAとの違いを2分で解説 - 6
Reactサーバーコンポーネント（RSC）完全解説｜仕組み・メリット・デメリット・ストリーミングまで - 7
📌 自己紹介（三好アキについて）