SPA と MPA

SPA と MPA とは

Web サイトの作り方には、大きく 2 つの設計思想があります。ページ遷移のたびに何が起きるかが、両者の決定的な違いです。

• MPA（Multi-Page Application）：リンクをクリックするたびに、サーバが新しい HTML ページをまるごと返す。昔ながらの Web の形。
• SPA（Single Page Application）：最初に1 枚のページを読み込んだら、あとは JavaScript が必要な部分だけ書き換える。ページ全体の再読み込みは起きない。

MPA は「本をめくる」イメージ、SPA は「1 つの画面の中身が動的に入れ替わる」イメージです。どちらが優れているという話ではなく、向き不向きがあります。

MPA：ページ単位で完結する

MPA では、各 URL がそれぞれ独立した HTML ページに対応します。/、/about、/products はすべて別ファイル（または別の動的生成）で、遷移のたびにブラウザはサーバへ要求し、返ってきたページを最初から描画し直します。

MPA の遷移
クリック → サーバへ要求 → 完成HTMLが届く → ページ全体を再描画
（毎回まっさらから組み立てる）

仕組みが素直なので、サーバ側のフレームワーク（PHP、Ruby on Rails、Django など）だけで完結しやすく、各ページが独立しているぶん初期表示が速く、SEO にも強いのが特長です。半面、共通のヘッダーやサイドバーも遷移のたびに読み直すため、画面が一瞬白くなるような体験になりがちです。

SPA：JavaScript が画面を差し替える

SPA では、最初のアクセスでアプリ本体の JavaScript を読み込みます。以降の「ページ遷移」は本物の遷移ではなく、JavaScript が API でデータだけ取得し、画面の必要な部分を書き換えて URL の表示を更新する、という見せかけの遷移です。

SPA の遷移
クリック → JSが必要なデータだけ取得（API） → 該当部分のみ差し替え
（ページ全体は読み直さない）

ページ全体を読み直さないため、遷移がほぼ瞬時で、ネイティブアプリのような滑らかさが得られます。React・Vue・Angular といったフレームワークがこの作りを支えます。一方、最初に大きな JavaScript を読み込む必要があり、初期表示が重くなりがちです。

トレードオフを一枚で

どちらを選ぶかは、次の観点を天秤にかけて決めます。

観点	SPA	MPA
初期表示	△ 重い（大きな JS を待つ）	○ 速い（完成 HTML が届く）
画面遷移	◎ 瞬時・滑らか	△ 毎回読み直しで白くなる
SEO / リンクプレビュー	△ 工夫が要る（JS 実行前は空）	◎ 標準で強い
サーバ負荷	○ API のみで軽め	△ 毎回ページ生成
実装の複雑さ	△ 状態管理・ルーティングが必要	○ 素直で枯れている
向く用途	管理画面・ダッシュボード・SNS	記事・LP・EC の商品ページ

ポイントは、**SPA は「使い込む画面」、MPA は「見て回る画面」**に向くということです。ログイン後に長く操作するダッシュボードは SPA が快適で、検索から訪れて数ページ見る記事サイトは MPA が堅実です。

二択ではなく「いいとこ取り」が主流

現実には、純粋な SPA か純粋な MPA かの二択ではありません。両者の長所を組み合わせる手法が一般的です。

• MPA に部分的な動的化を足す：基本は MPA の作りのまま、一部だけ JavaScript で動かす。最近は HTML の断片をサーバから差し替える軽量な手法（hotwire / HTMX 系）も人気。
• SPA を初回だけサーバ描画する：SPA でありながら、最初のページだけサーバで完成 HTML を作って返す（SSR）。これで初期表示と SEO の弱点を補い、2 回目以降は SPA の滑らかさを得る。

この「初回はサーバ描画、以降は SPA」がいわゆるハイブリッドで、Next.js や Nuxt のようなメタフレームワークが標準で支えています。どこで HTML を作るか（CSR / SSR / SSG）の整理は SPA / SSR / SSG で詳しく扱っています。

迷ったら、コンテンツの性質で選ぶのが堅実です。「ユーザーが長く滞在し、頻繁に操作する」なら SPA 寄り、「検索から来て情報を読む」なら MPA 寄り。そして公開ページは初回だけでもサーバで完成 HTML を返す——この方針で大半のサイトは破綻しません。

まとめ

• MPA：遷移ごとにサーバが完成ページを返す。初期表示と SEO に強く、作りが素直。
• SPA：最初に 1 枚読み込み、以降は JavaScript で差し替え。遷移が滑らかだが初期表示が重い。
• 違いの本質：「ページを読み直すか」「JavaScript が中身だけ差し替えるか」。
• 現実解：純粋な二択ではなく、初回はサーバ描画・以降は SPA のハイブリッドが主流。

土台となる HTTP/HTTPS や、SPA がデータを取得する REST API、別オリジン取得でつまずく CORS も合わせて押さえると理解が深まります。