これまで独学でReactを勉強をしてきたのですが、「Single Page Application(以下SPA)ってなに？」と友達に聞かれて上手く説明出来ませんでした。つまり、SPAについてしっかりと理解せずにここまできてしまったので、ここで一度基礎に戻って理解を深めよう、という思惑でこの記事を書いています。

SPAってなに？

現時点でSPAでググって上位表示されているページを引用してみます。

①SPAとは単一のWebページでアプリケーションを構成する設計構造の名称です。引用元

②SPAとは「Single Page Application」の略で、単一のページでコンテンツの切り替えを行うWeb アプリケーションのアーキテクチャの名称です。SPAではブラウザによるページ遷移を行わずにコンテンツの切り替えなどを行うことで、ユーザー体験（UX）を大きく向上させることができます。従来のWeb ページでは遷移時にページ全体が書き換わりますが、SPAでは JavaScript を用いてページ内の HTML の一部を差し替えてコンテンツを切り替えています。これにより、ブラウザの挙動に縛られないUIの実現や、パフォーマンスの向上が可能になります。引用元

③SPAはAdobe FlashやMicrosoft SilverlightといったリッチなUIを提供できるRIA（Rich Internet Application）に代わるフロントエンド開発の技術として、ブラウザの進化やHTML5の登場などによって誕生したアーキテクチャです。HTMLやJavaScript、CSSといったWeb技術で、デスクトップアプリケーションのような快適な操作性を実現できます。引用元

これだけではあまり理解できなかったので、他にもいろいろ調べてみて以下のように理解しました。

従来のWebアプリケーション(SPAでないもの)はクライアント側からリクエスト(リンクをクリックしたりボタンをクリックしたり、サーバー側に「このページを見せて」と要求すること)をすると、そのリクエストの度にサーバー側でHTMLを生成してそれをクライアント側で表示していた。
しかしながらこの方法だと、headerやfooterなどコンテンツが変わる可能性の低い部分も含めてページ全体のHTMLがリクエストごとに生成されてしまう上にページを再読み込みしないといけない
そこで登場SPA。
最初の画面の表示のみサーバーからHTMLを取得し、それ以降のリクエストではJavaScriptでDOMを操作することで、ページの差分(つまり、必要最低限の箇所)のみを更新するため、パフォーマンスが向上する
従来のWebアプリケーションは1つのページに対して1つのHTMLだったものが、SPAは1つのWebアプリケーションに対して1つのHTML(初期表示時に読み込むもの)。
これがSingle Page Applicationの由来

参考

SPA(Single Page Application)の基本

今さら聞けない！シングルページアプリケーションとは