SPA（シングルページアプリケーション） とは？

従来のウェブサイトはページを移動するたびに「新しいHTMLをサーバーからもらう→画面を丸ごと再描画」を繰り返す。SPAは最初の1回だけHTMLを読み込んで、あとはJavaScriptが必要な部分だけを書き換えるんだ。だから画面の切り替えがスムーズで、スマホアプリのような操作感になるよ。

Twitterの旧UI・Gmail・Googleマップなどが代表例だよ。タイムラインをスクロールしても画面全体が再読み込みされないし、メールを開いても白い画面にならない。あの「アプリっぽい使い心地」がSPAの特徴なんだ。

昔の検索エンジンはJavaScriptを実行しないから「画面が空」に見えていた。今はGoogleもJavaScriptを実行してインデックスするけど、タイムラグや制限がある。だからSEOが重要なコンテンツはSSRでHTMLを返す手法と組み合わせることが多いんだよ。

いくつか対策があるよ。コード分割（Code Splitting）でページごとにJavaScriptを分けて最初のダウンロード量を減らす方法、SSR/SSGとSPAを組み合わせるハイブリッド方式、Service Workerでキャッシュする方法などがある。Next.jsやNuxtはこのあたりの最適化を自動でやってくれるんだ。

SPAはページ遷移してもURLが変わらない可能性があるからだね。これを解決するのがHistory API（pushStateやreplaceState）で、React RouterやVue RouterなどのSPAルーターは内部でこれを使って疑似的なページ遷移を実現している。ルーターの設定が不十分だと「戻るボタンでアプリのトップに戻ってしまう」という問題が起きるから、SPAのルーティング設計は意外と奥が深いんだよ。