SPA/MPAとCSR/SSR/SSGの分類

はじめに

React（Next.js）やVue.js（Nuxt.js）などのフレームワークを使おうと思うと、SPA/CSR/SSR/SSGといった用語に触れると思います。
言葉の意味や仕組みは把握していましたが、それぞれの関係性がうまく理解できていなかったのでまとめました。個人的見解のため誤りがあればご指摘いただけますと幸いです。

分類

各用語の関係性をベン図にしました。

SPA/MPAについて

• SPA（Single Page Application）
  単一のWebページを読み込み、別の内容を表示する際にはJavaScriptを通じて内容を更新するものです。
  前述のJSフレームワークで作られるものはSPAに該当します。
• MPA（Multi Page Application）
  別の内容を表示するには、サーバーへのリクエスト（リロード）が必要なものです。
  従来の静的サイトやPHP（Laravelなど）で作られるものはMPAに該当します。

CSR/SSR/SSGについて

これらはSPAを構築するレンダリング技術のことです。
ただし、文脈によってはMPAに関する技術を指すこともあるので注意が必要です。

• CSR（Client Side Rendering）
  アクセス時のページ生成をクライアントサイドで行います。
  まず初回アクセス時にアプリケーションに必要なリソースを全て取得します。取得したHTMLの中身はほぼ空で、その中で読み込まれるJavaScriptがページ全体を生成します。その後の画面遷移もJavaScriptで処理するため、遷移のたびにWebサーバーへHTMLを要求する必要がありません。
  SPAには必須の技術であることや、意味が似ているため「SPA=CSR」と紹介する記事が多いですが、SPAはアプリケーションの種別、CSRはレンダリング技術のことなので厳密には別物です。
• SSR（Server Side Rendering）
  アクセス時のページ生成をサーバーサイドで行います。その後の画面遷移はCSRと同じ挙動になります。
  また、PHPなどのサーバーサイド言語で作成されたMPAもサーバーサイドでレンダリングしているためSSRと呼びますが、SSRという単語はSPAにおけるレンダリング技術として使われることが多いです。そのため、MPAにおけるSSRは SR（Server Rendering） として区別することもあるようです。
• SSG（Static Site Generation）
  ビルド時に静的ファイルを生成（プリレンダリング）しておいて、アクセス時には構築済みのHTMLを返すものです。その後の画面遷移はCSRと同じ挙動になります。
  一方、完全な静的サイトやJamstack構成のサイトもSSGですがCSRは使用していません。こちらはMPAでありSPAのSSGとは厳密には異なるため、個人的に Full SSG（Full Static Site Generation） と呼び区別しています。ただし「Jamstack + CSR」といった開発手法もあるので、一概に「Jamstack構成 = Full SSG」とは言えません。

感想

これまではSPA/CSR/SSR/SSGを同列の比較対象として捉えていたため腑に落ちない部分がありました。
yutaro blogさんの記事^[1]では細かい説明があり、SPAを構築するためにCSR/SSR/SSGが存在していること、かつSPAにはCSRが必須であること、SSR/SSGで生成したHTMLが使用されるのは初回アクセスのみでそれ以降はCSRの挙動になることなど、納得することができました。

参考

https://web.dev/rendering-on-the-web/
https://deliv.tech/2020/11/10/mpa-vs-spa/
https://developer.mozilla.org/ja/docs/Glossary/SPA

脚注

1. ブログが閉鎖されたためリンクを削除しました。Wayback Machineでアーカイブが確認できます。