Webフロントエンドの領域にいるとよく耳にするのがSPA, SSR, SSGなどのややこしい略語たち。
なんとなく概要は分かってるけど自分の言葉で説明する自信がなかったので備忘録としてまとめておきます。
図解でできるだけ分かりやすくまとめられたと思うので、参考にどうぞ。
SPA（Single Page Application）
SPAはSingle Page Applicationの略称。
ブラウザから初回リクエストが来ると、サーバーは、JSのビルドファイルと最小限のHTMLファイルを返却する。実際はもっと色々あるがざっくりとしたHTMLファイルの内容は以下のような感じ。
<html>
<head>
<title>タイトル</title>
</head>
<body>
<div id="app"></div>
<script src="/js/bundle.js"></script>
</body>
</html>見て分かる通り、サーバーから帰ってくるHTMLファイルはほぼ空なのでなにも表示されない。
そこで、ブラウザ上のJavaScriptがAPIを叩くことで、APIからのレスポンスをもとに初期表示との差分を更新する形でDOMを構築しHTML要素がレンダリングされる。
実際の動きを図解したのがこんな感じ。
帰ってくるHTMLファイルは単一なので、Single Pageと呼ばれている。
後述するSSRと対比してClient Side Renderingと呼ばれることも。
SPAのメリット
- ユーザーに優れた UX 提供が可能（ぬるぬる動く）
- ページ遷移が高速（ページ毎にリクエストを送らないため）
- ネイティブアプリの代わりとしても提供可能（PWA対応など）
- ビルド済みのHTMLとJSファイルがホスティングサーバーにあれば動く（ビルドしてNetlifyやVercelなどのサービスで簡単にデプロイできる）
SPAのデメリット
- 初期ローディングは時間がかかる（ブラウザ上でJSを実行する時間）
- SEOで不利な可能性もある
（初期状態はほぼ何もないHTMLファイルが返却されるため、Googleのクローラーが中身のコンテンツを認識できない可能性があるため。ただクローラーはJSを実行してから中身を解析してくれる、という話もあるので単純にSEOに不利だとも断言はできない）
以下の記事でも詳しく解説しています。
SSR（Server Side Rendering）
SSRはServer Side Renderingの略称。
上記のSPAと比較とすると、ブラウザ上で初期データをレンダリングするのではなく、サーバー側でAPIを叩き、レンダリングまでを行ってからHTMLファイルを返却する。
ただし、2回目以降はブラウザ上でAPIを叩いてデータを取得し、SPAと同様にブラウザ上でレンダリングを行う。
SSRのメリット
- コンテンツ表示までの時間が早い（ブラウザ上で初回レンダリングを行わないので）
- SEOに有利（SPAのデメリットの点を参照）
SSRのデメリット
SSG（Static Site Generator）
Static Site Generatorの略称で日本語に直すと、静的サイトジェネレーター。
アプリのビルド時にAPIからデータ取得をして、HTMLファイルをファイルを生成する。
サーバへリクエストがあると、ビルド時に生成したHTMLファイルをファイルを返却する。
SSRではリクエストがある事にサーバー上でレンダリングを行っていたのに対してSSGのようにビルド時に事前にHTMLファイルをレンダリングしておくことをプリレンダリング（事前描画）という。
ポイントはリクエスト時ではなくビルド時にAPIやデータベースからデータを取得し、レンダリングを行うことである。
SSGが利用される場面は、更新頻度の少ないサイトやブログなどが挙げられる。
SSGのメリット
- 静的サイトを配信するので、パフォーマンスが向上
- SPAと比較してSEOが向上する
- HTMLとJSファイルのみがホスティングサーバーにあれば、ページ配信が可能
SSGのデメリット
- ページ量が多いWebサイトには向かない
- ページ数が多くなればなるほど、ビルド時間が遅くなる
- 更新頻度の高いサイトには不向き（データの更新毎に再ビルドを行う）
まとめ
フロントエンドの勉強をしているとややこしい概念が出てくることがたくさんありますが、自分で噛み砕いて言語化すると理解が深まります。
以下の記事もオススメです。
それでは。今回は以上です。
