MPAとは？SPAとの違いとマルチページアプリケーションの仕組みを2分で解説

MPA：知っている人が少ない言葉

「MPA」とは「マルチ・ページ・アプリケーション」の略語です。

しかし、この言葉を聞いたことのある人は少ないと思います。

その一方で、「SPA（シングル・ページ・アプリケーション）」なら、一度はどこかで耳にしたことがあるでしょう。

この2つにはどのような違いがあるのでしょうか。

本記事は、MPAからRSCまでのウェブアプリ技術の発展を4回に分けて紹介するシリーズの最初の記事です。

ウェブアプリケーション・テクノロジーの発展の歴史では、まず最初に「マルチ・ページ・アプリケーション」が登場しました。

そして次に「シングル・ページ・アプリケーション」です。

	登場時期
MPA（マルチ・ページ・アプリケーション）	SPA以前（2000年ごろ）
SPA（シングル・ページ・アプリケーション）	2010年ごろ

MPAの代表例はWordPressです。

ではMPAとSPAの違いは、どこにあるのでしょうか。

大きな違いを一つ挙げると、それはサーバーからクライアント（ブラウザ）に送られる「モノ」です。

MPAでは、ページ移動時にサーバーにリクエストを行い、HTMLとJavaScriptを受け取って表示する仕組みになっています。

WordPressが今でも広く使われているように、MPAは現役の仕組みです。

しかしMPAには「ページ表示に時間がかかる」という問題があります。

ページが移動するたびに毎回サーバーとのやりとりが発生するからです。

この部分を改善したものが、次の記事で紹介するSPAになります ▼

MPA・SPA・SSR・RSCという技術の進化を、React 19の新機能まで含めて一本でまとめたガイドがあります。

全体の流れをまとめて把握したい方はこちらもどうぞ▼

MPAの課題を解決したSSR・RSCを実際の開発で使うには、Next.jsが標準です。

セットアップからServer Actionsの使い方まで、Next.js開発の全体像をまとめたガイドはこちらです▼

MPAのような背景知識を理解できても、いざReactの学習を進めるとなると迷いは残ります。

今の状況を教えていただければ、次に何をすればいいか、どう進めていけばいいかを個別にお答えします。

「この進め方で合っているのかな？」という確認だけでも大丈夫です。

下のフォームからご連絡いただければ、三好アキが直接、目を通してお返事します（無料）。