この記事について

この記事の内容は、かつて社内の技術共有の場で共有した内容。
以下共有対象の開発チームについての前提

自社のWebアプリケーションは伝統的なBackendでHTML生成 + jQueryという構成
画面の一部jQueryで非同期に更新しているが、基本はサーバー側でHTML生成して返す
SPAという言葉は知っている（はず）が、技術要件などは共有されていない

Wikipedia の定義

Single Page Application の略。
Wikipedia

シングルページアプリケーション（英: single-page application、SPA）とは、単一の Web ページのみから構成することで、デスクトップアプリケーションのようなユーザ体験を提供する Web アプリケーションまたは Web サイトである。必要なコード（HTML、JavaScript、CSS）は最初にまとめて読み込むか[1]、ユーザの操作などに応じて動的にサーバと通信し、必要なものだけ読み込みを行う。

→ ここでいう「単一の Web ページ」とは単一の HTML のこと
狭義の SPA は大体下の 3 点を満たす

Client 側（ブラウザ）での HTML 生成 - VirtualDOM、宣言的 UI / 命令的 UI みたいな言葉で議論されるのはここ。React や Vue はここ
Client 側（ブラウザ）での状態管理（State/Store） - MV〇や Flux などで議論されるのは主にここ。Redux や RxJS、VueX、Flux（実装）はここ。サーバーサイド MVC からクライアントサイド MVC へ(=アプリケーションステートの管理をフロント側が担うようになる)
Client 側（ブラウザ）でのルーティング - react-router、Vue-Router はここ

Not SPA の場合

SPA ではない Web サイト／アプリの場合

ユーザーがブラウザに URL を入力する（request 発行）
サーバー側の処理で HTML を生成する。その過程で DB への通信なども行われる。
1. DBから取得したユーザー固有の情報やユーザーの入力／操作／画面などのアプリケーションの状態をサーバー側で保存・管理する（所謂セッション）
2. サーバー側で管理している「アプリケーションの状態」に応じて、サーバー側でHTMLを生成（jspとか）
クライアント側（ブラウザ）へ生成した HTML を返す（response）
ブラウザはサーバーから返ってきた HTML を頭から読み込み必要なリソース（JavaScript や CSS 等）を要求する request を発行する
必要なリソース（JavaScript,CSS,png など）がすべて Client 側で読み込まれたとき、ページの表示が完了する
リンク等（<a href="hogehoge">）をクリックした際には上記 1 から 6 が繰り返される（← ここが SPA との大きな違い）

SPA の場合

ユーザーがブラウザに URL を入力する（request 発行） - 同じ
大体の場合サーバーが返す HTML は Static でアプリケーションを表示するためのガワだけ持っている（<body><div id="app-root"></div></body>みたいなの） - ここが違う
クライアント側（ブラウザ）へ（Static な）HTML を返す（response） - 同じ
ブラウザは response の HTML を読み込み必要なリソース（JavaScript や CSS 等）を要求する request を発行する - 同じ
ここで要求される JavaScript によって HTML 内のガワに画面に必要な要素が生成される - ここが違う。画面の生成は Client 側の JavaScript
1. ユーザーの入力／操作など状態として保存しておきたいものはClient側で「アプリケーションの状態」として保存しておく（state/store）
リンク等をクリックした際には 5 で読み込んだ JavaScript でガワの中身を書き換える。検索結果など動的に変わるものは、その結果を要求する request を発行する（非同期でデータだけ持ってくる） - ここが違う。大体の場合 JSON の配列で結果が返ってくる
1. 「リンクをクリックしたからリクエストを発行する」のではなく、「表示するコンポーネント内に動的なもの（検索結果とか最新のニュース記事とか）を表示したいから、その情報を取得するためのリクエストを発行する」ということ。
2. この「リンクをクリックしたときに表示したいコンポーネントを指定する」時に使われるのがreact-routerとかvue-router
3. DBからのデータ取得はバックエンド側でWebAPIとして実装される

SPA のメリット

宣言的UIやFluxなど、開発体験が良い（個人差あり）
Web アプリケーション（≠Web サイト）ではほぼ標準に近い

SPA のデメリット

(工夫をしないと)最初の読み込み時に大きなJavaScriptファイルを読み込むことになるので、そこに時間はかかる

まとめ

SPAではかつてサーバー側で実装されていた、1.画面の動的な生成、2.アプリケーションの状態管理、をどちらもクライアント側で実装する
かつてバックエンド側で、ORMとかDB用のライブラリとかを使ってDBからデータを取得していた部分を、WebAPIとして実装。
（多分語弊がある）かつてのWebサーバー＝今のフロントエンドのプロジェクト、かつてのアプリサーバー＝上記のようなWebAPIサーバー
フロントエンドのリポジトリの目的は、Webサーバーに配置するStaticなリソース群（実際はCDNからユーザーへ配信される）をビルドすること
- staticなindex.html、各種画像やfavicon、webpackでビルドされるbundle.js(app.js)
最終的には、SPA ＋ Serverless WebAPIになる（多分）