MPAとは？SPAとの違いとマルチページアプリケーションの仕組みを2分で解説
2025.7.2
2026.6.15
この記事は約2分で読めます
ウェブアプリの仕組みの歴史はMPAから始まりました。
WordPressも採用するこの仕組みをしれば、SPAやSSRなどのモダンなフロントエンド開発への理解も深まります。
筆者：三好アキ（専門用語なしでプログラミング）
▶︎ 私について詳しくはこちら
MPA：知っている人が少ない言葉
「MPA」とは「マルチ・ページ・アプリケーション」の略語です。
しかし、この言葉を聞いたことのある人は少ないと思います。
その一方で、「SPA（シングル・ページ・アプリケーション）」なら、一度はどこかで耳にしたことがあるでしょう。
この2つにはどのような違いがあるのでしょうか。
本記事は、MPAからRSCまでのウェブアプリ技術の発展を4回に分けて紹介するシリーズの最初の記事です。
WordPressもMPAを使っている
ウェブアプリケーション・テクノロジーの発展の歴史では、まず最初に「マルチ・ページ・アプリケーション」が登場しました。
そして次に「シングル・ページ・アプリケーション」です。
| 登場時期 | |
|---|---|
| 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開発の全体像をまとめたガイドはこちらです▼
● https://monotein.com/present
次に読みたい記事特集
いま読まれている記事ベスト7
✤ 筆者 ✤
三好アキ（専門用語なしでプログラミング）
非IT出身。かつてプログラミングの専門用語の壁に何度もぶつかり、挫折した経験から、「専門用語なし」のメソッドを確立。1,200人以上のビギナーのフロントエンド開発入門を成功させる。翔泳社『動かして学ぶ！Next.js/React開発入門』（韓国でも出版）など著書30冊以上。Amazonベストセラー1位複数回獲得。
記事の執筆、法人向けReact研修なども行っています ▼
• 技術記事の執筆について
• 法人研修について