【JavaScript】MPA, SPA, SSR

MAP

ブラウザからの GET リクエストのたびに、サーバーサイドでテンプレートエンジンなどを使い HTML を生成して返す。
ブラウザは基本、返された HTML を描画するだけ。
基本的に内部ロジックは全てサーバーサイドに存在するため、動的に埋め込む情報も HTML 生成時に埋め込まれる（この点では高速といえる）。

ただ、リクエストのたびにページ全体の HTML を生成・描画するため遅い。
また、HTML が返却されないと画面が更新されないため表示内容の自動更新に弱い。

SPA

最初は空の index.html を読み込む。
次に script 要素に従い、JavaScript ファイルをロード・実行。
JavaScript が DOM API を使って画面を構築しつつ、初期表示に必要な情報を非同期でサーバーへ問い合わせる。

問い合わせは複数回発生することもあるため、SPA では初期表示が遅くなりがち。

加えて、上記のプロセスが完了しないと HTML が表示されないので検索エンジンとの相性も悪い。

一方良いところとしては、
初期表示完了後は、ユーザー操作に応じて非同期で呼び出し即座に画面反映されるため快適。

SSR

一言で言うと、SPA における初期表示処理がサーバーサイドに移動した形態。

初回リクエスト時に、サーバー側で HTML を生成（サーバー内で完結）。

通信回数が SPA に比べて少ないため速度的には有利になりやすい。
また、 完成された HTML を返すため検索エンジンとの親和性が高くなる。

初回表示後は、SPA と同じような動き方となる。