SPAサイトとは？仕組み・メリット・デメリット・実例を2分で解説
2020.12.30 2026.6.26
2020.12.30 
2026.6.26 この記事は約2 分で読めます
複数のページがあるのに、なぜ「シングルページ」？
その理由をウェブの歴史からひもときます。
SPAのメリット／デメリットも具体例つきで紹介
目次
筆者三好アキ（専門用語なしでプログラミング）
私について詳しくは → 自己紹介
なぜ「シングルページ」と呼ばれるのか
「SPA（シングル・ページ・アプリケーション）」という言葉には、ひとつ不思議な点があります。
私たちが普段使っているSPAのアプリには、/aboutや/dashboardなど複数のページがあるからです。
それなのに、なぜ「シングル（＝1枚）・ページ」という言葉が入っているのでしょうか。
答えを先に言ってしまうと、「ブラウザに渡されるHTMLページが1枚だけだから」です。
とはいえ、これだけではピンと来ないと思うので、もうすこし詳しく解説しましょう。
ウェブの歴史をさかのぼりながら、SPAの仕組みとメリット／デメリットも紹介します。
SPA登場以前 ― 静的サイトと動的サイト
SPAの理解は、その前の時代を知っておくとスムーズに進みます。
ウェブサイトの歴史は、「ページの作られ方」が進化してきた歴史でもあるからです。
大きな流れは「静的から動的へ」というものでした。
静的サイト
静的サイトでは、各ページがあらかじめ作られた状態でサーバーに置かれています。
ユーザーからアクセスがあると、その完成済みのページをそのまま送り返すだけです。
作る作業は事前に済んでいるため、表示は高速になります。
しかし弱点もありました。
ユーザーごとに表示を変えたり、サイト上で複雑な操作をしたりすることができないのです。
動的サイト
そこで登場したのが動的サイトでした。
動的サイトでは、アクセスがあった時にサーバーがページを組み立てます。
• ログインしたユーザーごとに表示を変える
• レビューを投稿する
今では当たり前のこうしたページは、動的サイトによって実現しました。
代表例がWordPressです。
下図を見てください。
静的サイトは「生成済みのページをそのまま送るだけ」。
一方の動的サイトは「データベースからデータを取得し、その都度ページを生成して送る」。
ここに両者の決定的な違いがあります。
SPAの登場
静的サイト → 動的サイトと来て、ついにSPAが現れます。
その背景にあったのが、JavaScriptの進化です。
動的サイトでは、ページの生成もデータの取得もすべてサーバーが担っていました。
しかし2000年代に入り、JavaScriptに多くの機能が加わります。
これによって、これまでサーバーが行ってきた処理をユーザーのブラウザ（＝クライアント）側でも行えるようになったのです。
「サーバー」と「クライアント」。
この2つの役割分担が変わったこと。
それがSPAを生み出しました。
「シングルページ」の意味
ここで冒頭の疑問に戻りましょう。
アクセスがあったとき、サーバーが返すHTMLページは1枚だけです。
ここだけを見ると静的サイトと変わりません。
しかしこの1枚のHTMLには、大量のJavaScriptが詰め込まれています。
そして実際のページ生成は、このJavaScriptがブラウザ上で行うのです。
2ページ目も、3ページ目も、すべてこの最初の1枚のHTMLファイルを下地にして、ブラウザ側で作られます。
【 サイト全体で使うHTMLがたった1枚だけ 】
これがSPA（シングル・ページ・アプリケーション）という名前の由来です。
では、静的サイトや動的サイトと比べ、SPAの優れている点はどこでしょうか。
SPAのメリット
表示が速い
ページはすべてブラウザ上で生成されるため、サーバーとの通信が発生しません。
そのため動的サイトよりも表示が高速です。
操作が快適
動的サイトでは、ページの一部を変えるだけでも、ページ全体をサーバー側で作り直す必要がありました。
ページの再読み込みがひんぱんに発生するのです。
身近な例を挙げましょう。
通販サイトで住所を入力するとき、郵便番号を打つと住所の一部が自動で補完されることがあります。
もし動的サイトなら、この補完のためにページ全体が再読み込みされてしまいます。
一方SPAでは、ページの変更したい部分だけを書き換えられます。
画面が再読み込みされることはありません。
ユーザーは入力作業をスムーズに、ストレスなく行えるのです。
開発・拡張がしやすい
動的サイトは、サーバーがほぼすべての働きを行う構造になっています。
そのため、サイト内の一部を変更するだけでも、全体への影響を考えなければいけません。
一方SPAでは、サーバー側とブラウザ側で、役割がはっきりと分かれています。
「ここはブラウザ側だけ直す」といった具合に、切り分けながら開発を進められるのです。
このようにメリットが多いSPAですが、もちろん苦手なこともあります。
SPAのデメリット
最初の表示が遅い
サーバーから渡されるHTMLは1枚だけですが、そこには大量のJavaScriptが含まれています。
この読み込みは重い処理です。
そのため最初の表示に時間がかかることがあります。
SEOに弱い
アクセス直後、サーバーから渡されるHTMLは中身がほぼ空っぽです。
下記コードを見てください。
// index.html
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>ページの中身は、このあとJavaScriptが作っていきます。
しかし検索エンジンのクローラーは、この「空っぽのHTML」を見てしまうことがあります。
するとページの内容が検索結果に正しく反映されません。
これがSEO面での弱点になります。
なお近年はクローラーの性能が上がり、「SPA ＝ SEOに弱い」とは一概に言えなくなりました。
とはいえ、静的サイトや動的サイトと比べると、まだ不利とされているのが現状です。
SPAのその先 ― SSRやRSCへ
SPAのこうした弱点（初回表示の遅さ・SEO）を補うため、新しい仕組みも次々と生まれています。
SSR（サーバーサイドレンダリング）やRSC（Reactサーバーコンポーネント）です。
SPAから始まったこのレンダリングの進化を、MPA・SSR・RSCまで一本の流れで理解したい方は、下記の記事をご覧ください▼
SPAの作り方
ここまで、SPAの仕組みとメリット／デメリットを見てきました。
しかし「読んで分かること」と「自分で作れること」は別ものです。
SPAの動き方を自分の手で確かめたい方は、下記教材を参考にしてください。
HTMLとCSSの知識だけで、Reactを使ったSPA開発ができます。
はじめてつくるReactアプリ
【2026年1月第3版発売。HTMLとCSSの知識だけで始められるReact開発。好評なハンズオン形式でスイスイ進める。最新のReact 19の情報もあり。】
Amazonで見る
よくある質問
Q1. SPAとSSG（静的サイトジェネレーター）は違うものですか？
違うものです。
SPAは「ブラウザ側でページを生成する仕組み」、SSGは「ビルド時にあらかじめページを生成しておく仕組み」を指します。
ただし両者は組み合わせて使われることもあり、混同を招くことも少なくありません。
SSGについては下記記事で詳しく解説しています▼
Q2. React + ViteはSPAですか？
そうです。
React + Viteで作るアプリは、デフォルトではSPAになります。
Reactそのものの始め方や開発環境の作り方は、こちらのガイドを参考にしてください。
Q3. SPAとMPA（マルチ・ページ・アプリケーション）はどう違いますか？
MPAは、ページ移動のたびにサーバーから新しいHTMLを受け取る仕組みです。
一方SPAは、最初に受け取った1枚のHTMLを下地にしてブラウザ側でページを切り替えます。
MPAやSSR、RSCまで含めたレンダリングの全体像の理解には下記記事をご覧ください▼
Q4. SPAではどうやってページを切り替えているのですか？
通常はReact RouterやTanStack Routerといったツールを使います。
ただし外部ツールなしで自作することも可能です。
方法は下記ページで紹介しています。
• React RouterやTanStackを使わないページ移動の実装方法（Code-based routing）
• React RouterやTanStackを使わないページ移動の実装方法（File-based routing）
次に読みたい記事特集
