シングルページアプリケーション・サーバーサイドレンダリングとは

シングルページアプリケーション(SPA)とは

単一のページでコンテンツの切り替えを行うWeb アプリケーションのアーキテクチャの名称です。
SPAを用いた有名な事例は

• Facebook
• Google Map

など。

サーバーサイドレンダリング(SSR)

(元々ブラウザ上で動かしていた)JavaScriptをサーバー内部で実行して、HTMLを生成することです。

イラストでまとめると

従来の動作の流れ

デメリット

• 変更がない部分(headerやfooterなど)のHTMLも毎回サーバーから送信されるので処理に時間がかかります。

シングルページアプリケーション(SPA)

メリット

• ブラウザによるページ遷移を行わずにコンテンツの切り替えなどを行うことで、UXを大きく向上させることができます。
• 2回目以降は更新したい部分だけをサーバーに要求するため処理が早い。
• ブラウザ側でできる処理はJavaScriptで終わらせることで、サーバとの通信量を最低限に抑えることができる。

（ブラウザの主な機能：ユーザーの選択したウェブリソースをサーバーに要求してブラウザウィンドウに表示することにより、ユーザーに提示すること）
ブラウザのしくみ: 最新ウェブブラウザの内部構造 - HTML5 Rocks より

デメリット

• 画面の初期表示は最初サーバーからHTMLやCSSを受け取ります。 それ以降の画面表示はデータ（JSON）をサーバーから受け取りそのデータを使ってJavaScriptでDOM操作をし画面遷移・更新を行います。そのためこの画面遷移・更新の処理をJavaScriptで書かないといけません。

サーバーサイドレンダリング(SSR)

メリット

• サーバー側でHTMLを生成するのでページ表示が早く(SPAの欠点である初回読み込みの遅さも無い)、ユーザーの通信環境に左右されにくい。

デメリット

• サーバー側の負担が増える。
• Node.jsやVue.js を実行できるサーバーが必要になる。

まとめ

SPAとSSRとの違いはざっくりいうと、HTMLを生成するのがブラウザなのか、サーバーかの違いです。

参考資料
シングルページアプリケーション（SPA）の導入メリット＆デメリット｜株式会社オロ
今さら聞けない！シングルページアプリケーションとは - Qiita
SPA、SSR、プリレンダリングの違いをまとめてみた - Qiita