今一度SPAとは何なのかについて整理してみました。
*解釈に間違いなどあればご指摘ください。
SPAという設計手法が出てくる以前のWebシステム開発
SPAという設計手法が出てくるまでは、多くのWEBシステム開発においてサーバーサイドレンダリングが標準的な手法だった。
サーバーサイドレンダリングとは：
サーバー側でHTMLを生成して、ブラウザでそれを表示する手法。（ブラウザに届いた時点では、既にHTMLが構成されている）
このサーバーサイドレンダリングという言葉自体が存在してなくて、SPAという概念が出てきてから目立つようになったと言われています。
この手法では、ページを更新する度に変更していない部分までサーバ側で生成し直していた為に処理に時間がかかっていた。また、フロントエンドの回収はサーバサイドのシステムへの修正が必要だった。
ただ、決してこのサーバーサイドレンダリングが古いという訳ではなく、アプリによってはこの手法が適しているケースもあるそうです。
では本題、SPAとは
一応念のため、SPAはSingle Page Applicationの略。
単一のWebページでアプリケーションを構成する設計手法
・最初だけHTMLを返し、それ以降はAJAX通信で非同期に必要なデータだけを受け取りコンテンツを更新する。
・JavaScriptで動作、描画をコントロールし、その名の通り一つのHTMLファイルで成り立っている。
・アプリの持つ状態（データ）の管理をフロントエンド側でも行う（Redux、Vuexで状態を管理）
サーバーとのやりとりを最小限に抑えて高速化させる手法
・フロントエンドでもデータ、Redux、コンポーネントを含めた設計力が必要になる
・Vue.js や React を用いてビュー部分のデータ（JSON）をブラウザに渡し、サーバーサイドではAPIのみを提供しページの構築を行う。
身近な例でいうと
SPA: GoogleMap, Gメール、Facebook
Non SPA: Amazon, Github
##「Vue.jsやReactを使っている = SPA」ではない。
React, VueはSPAを作りやすくしてるだけで、これらを使う＝SPAではないし、絶対必要なわけでもない（超絶難しいらしいです、、）
SPA化しないけど、Component機能を生かす理由でReactやVueを使う事もある。
LaravelやRailsなどのテンプレートファイルにVueやReactコンポーネントを埋め込んで使う例もある。
SPAのメリット
・ユーザーのアクションに対して必要な部分のみを更新するので、ページ遷移が非常に高速（非同期で必要なデータを取得する場合は、そのコンテンツが表示されるまではラグがある）
・ 最低限必要なものはHTMLファイル、JSファイルのみであり構成がシンプル。この2つをホスティング先に置いておけばとりあえずページは表示される
SPAのデメリット
・JSファイルが実行、評価されてDOMがマウントされるまでコンテンツが何も表示されない
・JSファイルのサイズが大きくなると、初期ローディングの時間が無視できないレベルになる
・SEOで不利（クローラーがJavaScriptを実行できるようになったとのことなので、この問題は解決されつつある。ただ、即時的に評価されるのではなく、評価までにラグがあるらしい）
・TwitterやFacebookのクローラーはJavaScriptを実行しないため、プレーンなSPAアプリだと動的なOGP対応ができない