🖥️
SPAとMPAのそれぞれの違いや特徴について
SPA（Single Page Application）と MPA（Multi Page Application）の違い・特徴・通信パターン
先ず初めに、個人開発にて、ユーザーが自分専用の問題集(問題とそれに対する解答)を作成し、カードをタッチすることで解答を確認しながら、繰り返し学習を行うことができるサービスを開発したのでぜひ気になったら以下の記事を記事をチェックしてみてください！。
↓以下はNext.jsにおけるレンダリング方法についてまとめました。ぜひこちらもチェックしてみてください～ 個人開発でWebアプリを作るときに、Webアプリってそもそもどんな種類があるの？と疑問になり調べたので、ぜひ皆さんの参考になればと思い記事を書くことにしました！結論から言うと、Webアプリには「SPA」と「MPA」という2つの構成方法があります。それぞれの特徴や仕組みを初心者向けにわかりやすく解説します。
SPA（Single Page Application）とは？
1.概要
SPA（シングルページアプリケーション）は、1つのHTMLファイルを基に、ページ遷移なしで動的にコンテンツを更新する Webアプリの形式です。
ユーザーがページを移動しても、画面全体をリロードせずに必要なデータだけを取得し、JavaScriptによって画面を更新します。
2.SPAの動作原理
初回アクセス時の処理
- ブラウザが
index.htmlをリクエスト - JavaScript（React, Vue, Angular など）が読み込まれる
- JavaScriptがルーティングを管理し、適切なコンポーネントを表示
- APIを通じてバックエンドから必要なデータを取得し、画面をレンダリング
画面遷移時の処理
- URLが変更される（例:
/dashboard→/profile） - JavaScriptがURL変更を検知し、適切な画面コンポーネントを表示
- 必要ならバックエンドのAPIを呼び出し、データを取得
- 取得したデータをもとに、ブラウザの画面を更新
- ページ全体をリロードせずにスムーズに遷移
3.SPAのメリット・デメリット
メリット
- 高速なページ遷移
- ユーザー体験（UX）が向上
- サーバー負荷が軽減
デメリット
- 初回の読み込みが遅い
具体例
- Gmail: 受信トレイの一覧は画面遷移せず、最新のメールだけ更新
- Twitter: 画面をスクロールすると、新しいツイートをAPI経由で取得して表示
- Netflix / YouTube: 動画リストのサムネイルが動的に読み込まれる
MPA（Multi Page Application）とは？
1.概要
MPA（マルチページアプリケーション）は、複数のHTMLページで構成され、ページごとにサーバーから新しいHTMLを取得する Webアプリの形式です。
ページ遷移のたびにサーバーへリクエストを送り、新しいページを読み込むため、従来のWebサイトと同じ仕組みで動作します。
2.MPAの動作原理
初回アクセス時の処理
- ブラウザがサーバーにリクエストを送る
- サーバーがリクエストに応じたHTMLを生成し、返す
- ブラウザがHTMLを解析し、CSS・JavaScript・画像をロード
- ページが表示される
画面遷移時の処理
- リンクをクリックすると、新しいリクエストがサーバーへ送られる
- サーバーが新しいHTMLを生成し、レスポンスを返す
- ブラウザがページ全体をリロード
- CSSやJavaScriptが再読み込みされ、ページが表示される
つまり、MPAは初回アクセス時も画面遷移時も、サーバーがリクエストに応じて新しいHTMLを生成し、ブラウザがそのHTMLを受け取ってページ全体をリロードする、ということ！
3.MPAのメリット・デメリット
メリット
- SEOに強い
- 初回読み込みが速い
デメリット
- ページ遷移ごとにリロードが発生する
- サーバーの負荷が大きくなる
具体例
- Amazon: 検索結果から商品ページに移動するたびに、新しいHTMLが読み込まれる
- ニュースサイト:各記事やページにアクセスするたびに、サーバーから新しいHTMLページが読み込まれる
Discussion