SPAとは？シングルページアプリケーションの仕組み・MPAとの違いを2分で解説

MPAからSPAへ

前回の記事では「MPA（マルチ・ページ・アプリケーション）」を紹介しました。

そしてMPAには、「ページの表示に時間がかかる」という問題があることにも触れました。

ページが移動するたびに毎回サーバーとのやりとりが発生するからです。

図にすると下図のようになっています。

ここを改善したものが、本記事で紹介する「SPA（シングル・ページ・アプリケーション）」です。

	登場時期
MPA（マルチ・ページ・アプリケーション）	SPA以前（2000年ごろ）
SPA（シングル・ページ・アプリケーション）	2010年ごろ

SPAの仕組み

SPAの仕組みを示したものが次図です。

SPAでは、ページ描画をJavaScriptがクライアント（ブラウザ）側で行うため、ページ移動のたびにサーバーとやりとりをする必要はなく、ページをすばやく表示できるのです。

しかし、SPAにもマイナス面がひとつあります。

ページの初回表示に時間がかかることです。

サーバーは最初のリクエストがあったとき「からっぽのHTMLファイル（index.html）」と、大量のJavaScriptをクライアントに送ります。まずここで時間がかかります。

さらに、クライアントがこれらを受け取ったあとには、HTMLファイルを下敷きにしてページをJavaScriptで組み立てる作業が始まりますが、ここでもさらに時間がかかります。

この結果、ブラウザには何もない真っ白なページ（＝からっぽのHTMLファイル）がしばらく映っていることになるのです。

⚫︎ monotein.base.shop/p/00005

メリット／デメリット

MPAでは、初回表示時を含め、ページ移動時には毎回時間がかかります。

一方SPAでは、ページ移動は素早く行えるものの、初回ページ表示時に時間がかかるのです。

ここを改善したものが、次の記事で紹介するSSR（サーバー・サイド・レンダリング）というものです。

SSR（サーバーサイドレンダリング）とは？仕組みとSPAとの違いを2分で解説

なお、SPAについてもう少し掘り下げて理解したい方は下記記事をご覧ください。

「静的サイト・動的サイトの時代からどうSPAが生まれたのか」、そして「SPAのメリット・デメリット」を、より詳しく追った記事です▼

• SPAサイトとは？仕組み・メリット・デメリット・実例を2分で解説

参考情報①（「からっぽのHTMLファイル」のコード例）

SPAの初回リクエスト時に送られてくる「からっぽのHTMLファイル」とは次のようなものです。

<body>タグ内にはJavaScriptを読み込むコードしかなく、ブラウザで表示する具体的なものが何もないのがわかります。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8" />
        <meta name="description" content="お天気アプリです" />
        <title>SPA</title>
    </head>
    <body>
        <div id="root"></div>
        <script type="module" src="/main.js"></script>
    </body>
</html>