SPAの2つの定義
下記の記事で、SPAの定義が2つに整理されていました。
【レンダリング大全】CSR, SSR, SPA, MPA, PPRの意味、そもそもレンダリングとは【2025年始】
zenn.dev
- ソフトナビゲーションを行うアプリケーション全般(SSR/SSG と共存する概念)
- ソフトナビゲーションを行う、初回表示もCSRのアプリケーション(SSR/SSG と排他的関係の概念)
どちらの定義の方がよいと言いたいわけではないのですが、私は1つ目の定義を使うことが多いです。
私が1つ目の定義を採用している理由
2つ目の定義を採用すると、Next.jsで作るようなSSR/SSGをしながらソフトナビゲーションも行うアプリを説明するときに、「SPAとMPAのいいとこ取り」や「SPAとMPAの中間的なもの」といった表現になってしまい、スッキリしません。
一方、1つ目の定義を使えば、次のようにシンプルに整理できます。
- SSR/SSGをしてソフトナビゲーションをするアプリ → SSR/SSGをするSPA
- SSR/SSGをせずソフトナビゲーションをするアプリ → CSRをするSPA
- ハードナビゲーションをするアプリ → MPA
Next.jsの How to build single-page applications with Next.jsでは、2つ目の定義を「strict SPA」と名付けています。
[余談] まさに、レトロニム
レトロニムとは、時代の変化により新しい事物が生まれたことから、既存の事物を新しいものと区別するため「後から」つくられた言葉のことです。
例えば、「有線イヤホン」はレトロニムです。
昔は「イヤホン」は有線のものしかありませんでしたが、ワイヤレスイヤホンが登場したために、「有線イヤホン」という言葉が生まれました。
SPAについても同じです。
もともとは、Webアプリケーションといえばハードナビゲーションするものしかありませんでしたが、CSRをしてソフトナビゲーションをするものが登場したため、ハードナビゲーションするアプリを指す「MPA」という言葉が生まれました。
さらに、SSG/SSRをしてソフトナビゲーションをするものが登場したために、CSRをしてソフトナビゲーションをするものを指す「strict SPA」という言葉が生まれました。