SPA は Single Page Application の略で、最初に読み込んだ1ページの中身を書き換えながら動く Web アプリの作り方です。
画面遷移のたびにサーバーからHTMLを取り直す従来の方式と対比されます。
何が変わるのか
| 従来（MPA） | SPA | |
|---|---|---|
| 画面遷移 | サーバーからHTMLを取得 | JavaScriptが書き換える |
| 初回表示 | 速い | 重くなりやすい |
| 2回目以降 | 毎回リクエスト | 差分データだけ取得して速い |
| サーバーの役割 | HTMLを組み立てる | APIとしてデータを返す |
操作の多い管理画面やダッシュボードでは、画面が白くならずに切り替わる体験の差が大きく効きます。
引き換えに増える仕事
SPA にすると、これまでブラウザやサーバーがやってくれていたことを自前で持つことになります。
- ルーティング：URLと表示内容の対応を自分で管理する
- 状態管理：画面をまたいで持つデータの置き場所を設計する（Context API や Redux の出番）
- 戻るボタン：ブラウザの履歴と整合を取る
- エラーと読み込み中：通信中の表示を画面ごとに用意する
「SPAは速い」だけで選ぶと、この実装量を見落とします。
サーバー設定でつまずく定番
SPA を公開してトップページは出るのに、/users/1 を直接開くと404になる——これは非常によくあります。
原因は、そのURLに対応するファイルがサーバー上に存在しないからです。ルーティングはJavaScriptが担当しているので、どのパスへ来ても index.html を返す設定（フォールバック）をサーバー側に入れる必要があります。
SEOとの相性
中身をJavaScriptで生成するため、検索エンジンやSNSのプレビューが内容を取得できないことがあります。公開サイトで検索流入が必要なら、SSR や SSG を検討してください。
逆に、ログインが前提の管理画面ならSEOは不要なので、SPAの弱点はほぼ問題になりません。用途で選ぶのが正解です。