SPAとは何かを専門用語なしで理解する - Web開発における知見共有系ページ

SPAという言葉は難しそうに見えますが、仕組み自体は単純です。
実は、ページを移動しているように見えて移動していません。

多くの人が「リンクを押した＝別ページを開いた」と思っています。
しかしSPAでは、同じページのまま画面の中身だけを書き換えています。

つまりSPAとは技術の名前というより、「ページの作り方の違い」です。

まず、従来のWebの流れです。

1. リンクをクリック
2. サーバーにアクセス
3. 新しいHTMLを受け取る
4. 画面を全部描き直す

検索結果をクリックすると、画面が一瞬白くなります。
あの白い画面は「新しいページを読み込んでいる」状態です。

この方式では、操作のたびにページを作り直します。

SPAでは流れが変わります。

1. 最初に1回だけページを読み込む
2. 以後はデータだけ取得
3. 画面の必要な部分だけ更新

fetch("/api/article/1")
  .then(r => r.json())
  .then(data => showArticle(data));

ここで重要なのは、取得しているのが「ページ」ではなく「情報」だという点です。
文章や数値だけを受け取り、ブラウザ自身が画面を作ります。

つまり、サーバーは画面を送っていません。
材料だけを送り、調理はブラウザが行っています。

スマホアプリを思い出してください。
画面を切り替えても、アプリ自体は終了していません。

SPAも同じです。
ブラウザの中でプログラムが動き続けています。

そのため

という挙動になります。

Webなのにアプリに見える理由はここにあります。

SPAはすべてのサイトに向いているわけではありません。
特に効果が出るのは「操作が多いサービス」です。

例：

逆に、記事を読むだけのページでは利点が少ないこともあります。

特にログイン後の画面で効果が大きくなります。

SPAは高速に見えますが、初回だけは重くなりやすいです。
理由は、画面を動かすプログラムを最初にまとめて読み込むからです。

という特徴になります。

このため、検索から直接訪れる記事ページでは、通常のWebの方が体感が良いこともあります。

必ずしもそうではありません。
向いている用途が違うだけです。

「閲覧中心のサイト」と「操作中心のサービス」は別物です。
SPAは後者に適しています。

正確には「操作が速く感じる」です。
ページの読み込み自体が速いとは限りません。

SPAは高速化技術ではありません。
ページという考え方をやめた設計です。

従来のWebは「ページを取り替える仕組み」でした。
SPAは「画面を書き換える仕組み」です。

この違いを理解すると、なぜログイン前と後でサイトの動きが変わるのかが見えてきます。
公開ページは文書、ログイン後はソフトウェアとして動いている場合が多いからです。

つまりSPAとは、Webサイトの進化というより、
Webがアプリケーションに近づいた結果と言えます。