SPA, SSR, SSGって結局なんなんだっけ？

【2023/11/14追記】
SPA, SSRの説明を訂正、および不必要な箇所の削除を行っています。
また、この記事はNext.js等の、具体的にフレームワークで使用されている各概念を説明するものではないので、ご留意ください。

概要

SPA, SSR, SSGという技術用語を、業務の中でも、ネットの記事の中でもよく耳にするのですが、こういう感じかな？といううっすらとした理解のままだったので、今回整理しました。

内容に誤りがあった場合はご指摘いただけますと幸いです。

(MPA) -> SPA -> SSR -> SSG という順に説明をしていきます。

SPA

SPAの要旨を述べると、最初に、HTML, CSS, JSなどの必要なassetsをWebサーバーから取得し、その内のJSをもとに具体的なUIを描画し、またページ遷移の際のUIの変化も、JSをもとに再描画を行うアーキテクチャとなります。

こちらはSingle Page Applicationの略称で、一つのHTMLページに対して必要なUI Componentを適宜描画していく、という考え方が根幹に存在するため、このように名付けられているようです。

上の要旨だけだとよくわからないと思うので、まずはSPAと対比的な関係にある、MPA（Multi Page Application）というアーキテクチャに触れつつ、SPAにどのような良さがあるのかなどを紹介していきます。

MPA

MPAはRailsなどに代表されるMVCフレームワークのみを利用する形式で、従来よく使われてきました。

ブラウザから「こういうページがほしい」とHTTPリクエストをもらうと、Webサーバーは内部でHTMLを組み上げ、JavaScriptやCSSと一緒にHTTPレスポンスを返します。重要なのは、この処理がページを遷移するごとに毎回行われるということです。

図に表すとこんな感じです。

ユーザーはボタンをぽちぽち押すたびに少しの時間待つことになる、重いページをとってくるときなどは特に時間がかかる、などのデメリットがあります。
一般的にSPAは、これらのデメリットを解消・緩和できるアーキテクチャという立ち位置になります。

改めて、SPA

上で述べたように、SPAは「最初に、HTML, CSS, JSなどの必要なassetをWebサーバーから取得し、その内のJSをもとに具体的なUIを描画し、またページ遷移の際のUIの変化も、JSをもとに再描画を行うアーキテクチャ」です。

つまりMPAとは異なり、サーバーからページ(asset)を取得してくるのは基本的には初回のみとなっており、2回目以降はAPIからデータを受け取ることで差分箇所のみ都度置き換えます。

図に表すとこんな感じです。

図にもある通り、2回目以降のページ遷移を表現するためのリクエスト処理はAjaxで実現しています。Ajaxはこちらの記事がわかりやすいです。

https://qiita.com/hisamura333/items/e3ea6ae549eb09b7efb9

こうした形式では何がうれしいのでしょうか？

最も大きなメリットをあげると、ページ遷移を、サーバーにリクエストを送らないため速やかに実行できるようになり、ユーザーの体験がより向上します。

SSR

SSRはざっくり、ページ遷移のたびWebサーバーにリクエストが走り、APIと連携をしつつレンダリング（ここではHTML生成の意）が行われ、生成されたHTMLをブラウザに返すアーキテクチャのことをいいます。

MPAと似ていますが、SPAと併用されることが多い点、Node.jsでWebサーバーが作られる点などが旧来のMPAとは異なる点となります。

それゆえ、SSRは、しばしばSPAを実現するUIライブラリ, UIフレームワークのメタフレームワーク（Next.jsなど）の機能として提供されるアーキテクチャです。

図に表すとこんな感じです。

SSG

一方でSSRとよく比べられるのがSSGです。

SSGはざっくり、ビルド時に、サーバー側で、APIからのデータ取得とそれに伴ったHTMLの構築を終わらせておき、ユーザーからリクエストされた際にこの事前につくっておいたHTMLを渡すアーキテクチャです。

ビルドの都度静的なページ（サイト）を生成するので、Static Site Generation（SSG）です。
図に表すとこんな感じになります。

SSGの最大のメリットは、初回のビルドと、それに伴うデータの埋め込みを前もって行い、後はできたものを表示するだけ、という構造なので、ユーザーが「ページ見たい！」とリクエストをしてからかなりの速度で表示することができる点です。

しかしSSRと比べて、最新のデータを常に画面に反映できるわけではない（それをすると毎回ビルドをする必要がある）ので、ブログなどの情報更新の機会が少ないサービスで好まれます。

それぞれどのような技術で実現できるか

SPA

React, VueなどのUIライブラリ, UIフレームワーク

SSR

Next.js, Nuxt.js, Remixなどのメタフレームワーク

SSG

Next.js, Nuxt.js, Gatsby.jsなど

所感

これまで3つ4つと紹介しましたが、必ずしも1つのWebサイトをつくるうえで1つのアーキテクチャに絞る必要はないようです。
たとえばNext.jsだと、SSRとSSGを混在させた構成が可能です。

本記事では、それぞれの用語の特徴をざっくりまとめたかたちですが、如何せんこれらの用語は定義が曖昧なので、参考程度に収めておいていただけると幸いです。

参考記事

https://shimablogs.com/spa-ssr-ssg-difference
https://scrapbox.io/vue-yawaraka/SPAとMPAって何が違うの？SPAにしたほうがいい？
https://atmarkit.itmedia.co.jp/ait/articles/1702/22/news012.html
https://tech-blog.cloud-config.jp/2021-07-30-web-rendering/
https://zenn.dev/luvmini511/articles/1523113e0dec58
https://zenn.dev/akino/articles/78479998efef55
https://lealog.hateblo.jp/entry/2021/08/12/103111