MPAとSPAの違い

MPAとSPAについての知見が浅かったので一度まとめてみます。
※CSR、SSR、SSR、ISGなどあるがここでは基本だけとします。

MPA(Multiple Page Application)とは

複数のHTMLページで構成。従来のWebサイトの通信方法。

レンダリングとは(それぞれの役割で異なる)
クライアント側・・・HTMLファイル等を読み込んで画面に描画
サーバー側・・・HTMLコードを生成する

<通信パターン>

1. クライアント・・・Webサイトを表示するためのGETリクエストをサーバーに送る。
2. サーバー・・・POSTレスポンスとしてHTMLを返す
3. クライアント・・・ブラウザでHTMLファイルをパース
4. クライアント・・・CSSファイルとJSファイルの参照の解析
5. クライアント・・・HTMLのパース後、DOMツリーを生成
6. クライアント・・・CSSのパース後、CSSOMツリーを生成
7. クライアント・・・スタイルをDOMに適用する
8. クライアント・・・JavaScriptのパース、実行

SPA(Single Page Application)とは

1つのHTMLファイルでページのコンテンツを全て管理して表示する開発手法。

<通信パターン>

1. クライアント・・・Webサイトを表示するためのGETリクエストをサーバーに送る。
2. サーバー(フロント)・・・レスポンスとして全てのリソース(HTML, CSS, JavaScriptなど)を返す
3. クライアント・・・ブラウザでHTML, CSS, JavaScriptを全てをパースと実行(初回のみ)
4. クライアント・・・2回目以降のリクエストは差分情報のみをサーバーにリクエスト
5. サーバー(バックエンド)・・・JSON形式で返す
6. クライアント・・・差分箇所のJSONをJavaScriptでHTMLに追加
7. 以降4～6の繰り返し

SPAのメリット

• ページ遷移がスムーズでパフォーマンスが向上

SPAのデメリット

• 初期表示が遅い。Webサーバーへ初回リクエストでアプリケーションに必要なリソースを全て受け取るため全てをレンダリングするのに時間がかかる。
• 開発コストがかかる。JSファイルのサイズが大きくなりがち。

MPAのメリット

• ローコストで実現可能。

MPAのデメリット

• サーバーへのアクセス回数の増加。ページごとにサーバーへリクエストするため、毎回ページ全体の再レンダリングが発生。

参考

フロントエンド研修【MIXI 23新卒技術研修】
MPA vs. SPA 🚀 Astroドキュメント
フロントエンドの HTMLレンダリング手法と周辺技術について理解する - Qiita