■はじめに
従来の一般的なWebアプリケーションの画面表示切り替えの設計手法は、ユーザのアクションに応じてサーバーから次に表示する画面のHTMLを受け取り、そのたびにヘッダやフッダを含めて全て更新する設計手法であり、これを"MPA(Multi Page Application)"と言う。
これに対して、Webアプリケーションに最初にアクセスしたときに全画面表示に必要なJavaScript,HTML,CSSをサーバーから受け取り、画面表示切り替えする際はサーバーからは必要なデータ(通販サイトであれば商品の金額や在庫数など)のみを受け取り、初めに受け取ったJavaScriptで次に表示するHTMLを生成し差分のみを更新する(ヘッダやフッダなどが更新不要であれば更新しない)設計手法を"SPA(Single Page Application)"と言う。
以降にSPAについてざっくりまとめると、、
■従来型…MPA(Multi Page Application)
ユーザのアクションに応じてサーバーからHTMLを受け取り、そのたびにヘッダやフッダを含めて全て更新する設計手法
■SPA(Single Page Apication)
最初にサイト全体の表示に必要なJavaScript,HTML,CSSなどを受け取った後は、必要なデータだけをサーバに要求し差分を表示する設計手法
(必要なデータはサーバーから非同期的にJSONデータとして受け取る)
■従来型(MPA)とSPAの比較
画面切り替え時の従来型(MPA)とSPAの比較すると、
| 従来型(MPA) | SPA | |
|---|---|---|
| サーバーから受け取るもの | HTML,CSSなど →通信量大 |
データのみ(JSON方式) →通信量小 |
| 画面更新箇所 | 画面全てを更新 (ヘッダやフッダ等の更新不要箇所も更新) |
更新が必要な箇所のみ更新 (ヘッダやフッダ等更新不要箇所は更新しない) |
■SPAのメリット
よってSPAのメリットとしては、
・画面切り替え時のサーバーとの通信量を抑えることができる
・画面更新にかかる時間を短くすることが可能
■SPAのデメリット
またSPAのデメリットとしては、
・最初のローディングの際にHTMLやJavaScriptなど全てのデータを取得する必要があるため、初期ローディングに時間がかかる
・実装コストがかかる、開発に慣れている者が少ない、などなど