SPAとは

SPAとは、Single Page Applicationの略。単一のページでコンテンツの切り替えを行うWebアプリケーションの設計構造の名称です。
CSR（Client Side Rendering）とも言われます。

SPAの処理の流れ

1. ユーザーがリクエストする
2. リクエスト初回時、表示に必要なデータをサーバーから返してもらう

3. ブラウザ側でHTMLを生成して表示

4. リクエスト2回目以降はデータの差分だけAPIサーバーにリクエストし、返されたデータをブラウザ側で処理して表示

SPAのメリット

• • 通常のWeb ページでは実現できないユーザー体験(UX)を実現できる
    SPAでは、ブラウザによるページ遷移を行わずにテキストや画像などのコンテンツを更新されるため、UXを大きく向上させることができます。
    従来のWeb ページでは遷移時にコンテンツ全体が書き換わりますが、SPAではJavaScript を用いて、ページ内のHTMLの一部を差し替えてコンテンツを切り替えています。
    これにより、サービスのパフォーマンスの向上が可能になります。

• 高速なページ遷移を実現できる
  上記の通り、SPAでは遷移先のページを構成するために必要最小限のデータのみを取得し、ブラウザでHTMLを構築するため、従来のWebページと比較してページ遷移が高速になります。

SPAのデメリット

• • 初期ローディングにかかる時間が増える
    ページの切り替えは高速になりますが、今までサーバー側で行っていたHTMLの生成をブラウザで行うことになるため、 初回リクエストにかかる時間は増えます。

• SEOに弱い
  クローラーはJavaScriptを正しく評価できないためSEOに弱いと言われています。

SPA関連の歴史

2010年頃: iPhone osでFlashをサポートしない事を発表して、代わりにSPAが注目が浴びた

関連用語

SSG
SSR
レンダリング

＜執筆・監修＞
アルサーガパートナーズ株式会社　DX技術用語集制作チーム　フロントdivision

（2021年9月時点）