【えすぴーえー・えむぴーえー】
SPA / MPA とは？
最終更新:
💡 同じ文書の画面を更新するか、別の文書へ移るか
SPAは同じHTML文書内でJavaScriptにより画面を切り替える構成。MPAは複数のHTML文書をページとして持つ構成。URLの有無や、サーバーでHTMLを作るかどうかだけでは区別できない。
📌 このページのポイント
ひよこ SPAはページが一つしかないの？
ペンギン先生 同じHTML文書の中でJavaScriptが画面を更新する構成だよ。見た目には複数の画面があり、画面ごとのURLを持つこともできる。MPAは複数のHTML文書を持ち、従来型では別のページへ移ると新しい文書を読み込むんだ
ひよこ SPAなら画面の切り替えは必ず速い？
ペンギン先生 文書全体の読み込みを避けられるので、操作中の状態を保ったり、必要な部分を更新したりしやすいよ。ただし、通信や描画の量によるので必ず速いわけではない。毎回JSONだけを取得することも、通信が必須であることも定義ではないんだ
ひよこ 戻るボタンやURLはどうなるの？
ペンギン先生 SPAでもHistory APIなどを使い、URLと画面の状態、戻る・進むを管理できるよ。画面だけを書き換えて履歴を整えないと、期待した画面に戻れないことがある。画面ごとにURLが必要という理由だけでMPAに決まるわけではないね
ひよこ SEOや最初の表示はMPAの方がいい？
ペンギン先生 JavaScriptの実行に依存する構成では、初期表示や検索への対応に工夫が必要になるよ。ただしSPAとMPAの区別と、CSR・SSR・SSGなどのHTMLの作り方は別の観点。方式の名前だけで、速さや検索での評価が決まるわけではないんだ
ペンギン先生 できるよ。例えばTurbo Driveはリンクやフォーム操作を背景で処理し、応答HTMLのbodyなどを更新する。従来型MPAと同じ全体再読み込みだけではなく、こうした組み合わせもあるので、文書の構成と画面更新の仕組みを分けて確認しよう
まとめ：ざっくりこれだけ覚えればOK！
「SPA / MPA」って出てきたら「同じ文書で画面を更新する構成と、複数文書を使う構成」と思えばだいたいOK！
📖 おまけ：英語の意味
「Single Page Application / Multi Page Application」 ＝ 単一ページアプリケーション / 複数ページアプリケーション
💬 ここでのPageは画面の見た目やURLの数だけでなく、アプリを構成するHTML文書の違いに注目するよ