SPA / MPAとは何ですか？

SPA（Single Page Application）はページ遷移なしで動的に画面を更新するアプリ。MPAは従来のページ遷移型Webサイト。

SPA / MPAのポイントは？

SPA = 1つのHTMLページ上でJavaScriptが画面を動的に書き換える。MPA = リンクをクリックするたびにサーバーから新しいHTMLが返る。React、Vue、AngularがSPAフレームワークの代表。Astro、Ruby on RailsがMPA寄りのフレームワーク

【えすぴーえー・えむぴーえー】

SPA / MPA とは？

💡 「1ページで完結」か「ページを行き来」か

📌 このページのポイント

SPA = 1つのHTMLページ上でJavaScriptが画面を動的に書き換える
MPA = リンクをクリックするたびにサーバーから新しいHTMLが返る
React、Vue、AngularがSPA フレームワークの代表
Astro、Ruby on RailsがMPA寄りのフレームワーク

SPAとMPAの通信方式の違い

ひよこ

SPAのメリットは？

ペンギン先生

①ページ遷移が高速（HTMLの再読み込みが不要でJSONデータだけやり取り）、②ネイティブアプリのような操作感、③フロントエンドとバックエンドを分離しやすい。Gmail、Google Maps、Twitterアプリ版はSPAだよ。ページ遷移のたびに白い画面がチラつかないのが特徴だね

ひよこ

SPAのデメリットは？

ペンギン先生

①初回表示が遅い（大きなJavaScriptバンドルをダウンロードする必要がある）、②SEOが弱い（対策にSSR/SSGが必要）、③ブラウザの「戻る」ボタンの挙動が複雑、④JavaScriptが無効だと動かない。特にSEOとパフォーマンスの問題から、Next.jsのようなSSR対応フレームワークが生まれたんだよ

ひよこ

MPAの方がいい場合は？

ペンギン先生

①コンテンツサイト（ブログ、ニュース、ドキュメント）→SEOが重要、②ECサイト→商品ページごとにURLが必要、③社内業務システム→操作感よりも開発速度とメンテナンス性。Astroのように「基本はMPAだけど必要な部分だけSPAのような動的機能を追加できる」ハイブリッドが今のトレンドだね

ひよこ

SPAとMPAの中間はある？

ペンギン先生

あるよ。Hotwire（Turbo）はMPAなのにSPAのような高速ページ遷移を実現する。サーバーからHTMLを返すMPA方式だけど、Turboが差分だけを更新するからページ全体の再読み込みが不要。htmxも同様の思想。「SPAの良いところだけMPAに取り入れる」アプローチが注目されているんだ

まとめ：ざっくりこれだけ覚えればOK！

「SPA/MPA」って出てきたら「ページ遷移のあるなしの違い」と思えればだいたいOK！

📖 おまけ：英語の意味

「Single Page Application / Multi Page Application」＝単一ページアプリケーション / 複数ページアプリケーション

💬 Single（1つの）Page（ページ）で動くアプリ。ネイティブアプリのような操作感を目指しているよ

← 用語集にもどる