はじめに
- コンピュータサイエンス初心者です。わからないことばかりです。
- Reactの勉強をしていて、REACTはSPAでルト意味不明なことを言っていたので、SPAとMPAについて調べた。
- 「知識のアウトプットをしたい」「自分と同じ初心の方の参考になればな」「あわよくば上級者からのコメント欲しい」という思いで書きます。
SPAとMPAとは？
SPA
- SPAとは、シングルページアプリケーション（Single Page Application）
- 最初のページロード時に、webサイトの見た目に必要なデータを全てダウンロードする。
- 以後は、ページ遷移時の動的なデータは、クライアントサイドからサーバーサイドにファイルデータを送信する際に、必要最低限のデータを非同期処理によって送る。
これによって、スムーズなページ遷移が可能になる。
※非同期処理：あるタスクが実行されているときに、他のタスクが別の処理を実行できる方式
MPA
- MPAとは、マルチページアプリケーション（Single Page Application）
- 初期段階のwebアプリケーション開発でよく使われていた技術。
- クライアントサイドからファイルデータのリクエストをサーバーサイドに送って、ファイルデータのレスポンスが返される。そのため、ページのと見込みに時間がかかってしまって、ラグが生じてしまう。
- また、大規模なアプリ開発では複雑な構造になってしまうため、向いていない。
- しかし、個々のページが独立しているため、情報が整理しやすく、検索エンジンによるインデックス作成が容易になる。
※検索エンジンによるインデックス作成：検索エンジンのデータベースに、webページを登録すること
まとめ
SPAとMPAの違いは、簡単にいうとページ遷移時のファイルデータの取得方法の違いである。
| メリット | デメリット | |
|---|---|---|
| SPA | ページ遷移がスムーズ | 初回ページを読み込むのに時間がかかる。SEOに不利。 |
| MPA | SEOに有利 | ページ遷移にラグが生じる |