これまで独学で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の由来