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

SPA / MPA とは?

💡 「1ページで完結」か「ページを行き来」か
📌 このページのポイント
SPA vs MPA SPA(Single Page App) 初回ロード(HTML+JS) JSがページを描画 ページ遷移 → API通信のみ 差分だけ再描画(高速) MPA(Multi Page App) ページA → サーバーからHTML ページ全体を表示 ページB → サーバーからHTML 毎回ページ全体を再読込
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(ページ)で動くアプリ。ネイティブアプリのような操作感を目指しているよ
← 用語集にもどる