まずは、これだけ
SPAはひとつのページ内で必要な部分を更新し、MPAは移動のたびに別ページを読み込みます。
違いは画面遷移のしかた
SPAはSingle Page Application、MPAはMulti Page Applicationの略です。見た目が似ていても、リンクやボタンを押した後のページ更新方法が異なります。
SPA
最初に土台を読み込み、その後は必要なデータと表示部分を更新する。
MPA
URLの移動ごとに、サーバーから新しいHTMLページを受け取る。
共通点
どちらも複数の画面やURLを持つWebサービスを作れる。
クリックした後の流れ
SPAはアプリのような滑らかな操作感を作りやすく、MPAはページ単位の構造が分かりやすい傾向があります。
1利用者リンクを押す
2SPA必要なデータを取得
3部分更新画面の一部を変更
4MPA新しいHTMLを取得
5全体更新ページを表示し直す
SPAでもURLを変更でき、ブラウザの戻る・進むに対応できます。ただし、その動作をアプリ側で正しく管理する必要があります。MPAはURLとHTMLページの対応が比較的分かりやすいのが特徴です。
向いている場面は違う
SPAとMPAは優劣ではなく、サービスの性格に合わせて選ぶものです。現在は両方の特徴を組み合わせる構成も一般的です。
SPAが得意
管理画面、チャット、地図など操作が連続する画面。
MPAが得意
記事、企業サイトなどページ単位で内容が分かれる構成。
組み合わせ
最初はHTMLを表示し、その後を部分更新する方法もある。
よくある誤解：SPAなら必ず速い？
SPAは画面遷移が滑らかになりやすい一方、最初に読み込むJavaScriptが大きいと初回表示に時間がかかることがあります。MPAもキャッシュやサーバー側の工夫によって高速に表示できます。
検索エンジンへの対応も、SPAだから不可能、MPAだから完璧という単純な話ではありません。使う仕組みと実装方法によって結果が変わります。
ここまでのまとめ
SPAは「同じ舞台で場面転換」、MPAは「ページごと舞台を入れ替える」と考えると違いをつかみやすくなります。