SSR SSG SPA 比較 最新 2026
2020年ごろのフロントエンド、それはCSR, SSR, SPA, SSGなどの3文字略語が乱舞し、初見の人間は否応なしに混乱の渦に叩き込まれる修羅の時代でした。今はどうでしょうか？SSRは耳にしますがあまり他は聞かなくなったのではないでしょうか？彼らはどこに消えたのでしょうか？
SPA, SSRなどは現代でも考える価値のある概念で、手法が出尽くした今は冷静な視点での理解がしやすくなっています。一方でこれらの用語は「レンダー」という単語に引っ張られて同等に重要な「ナビゲーション」「データフェッチ」の要素が抜け落ちがちなこと、Next.jsやGatsbyなどを中心に使われたため語義の揺れが若干あること、ISRなど特定のフレームワーク限定で現在はほぼ消滅した用語が混ざっていることから、Astroなど「SPA時代」的でないフレームワークを含むような、より広範な議論への使いづらさが残っています。
この発表ではレンダリング、ナビゲーション、データフェッチの3点からアーキテクチャを捉え直して各手法の向き不向きを明らかにすることで、みなさんが「SPA時代」より古くからあるアーキテクチャ、そして近年のWeb標準やNext.jsの新しいアーキテクチャも含めて評価できるようになることを目的にします。
何をさせたいか
aumy.icon 知れ！！！！！！
aumy.icon てきとうすぎる…
aumy.icon CSR vs SSRみたいなのはJSが生まれた時からあるし今もまだあるぜ！
先行研究
2020年ぐらい（要出典）
SSR, CSR, SPA, SSG, ISR, PPRなど
aumy.icon 狂っていた時代…
aumy.iconあれ今どうなったんだ？
rendering単位が変わったことで用語自体が控えめになったよね
概念はまだある
なんかそもそもサイト全体で切り替えだった時代なかったか？
あった
レンダー
viewが作られること
HTMLを構成する
DOMガリガリやる
難しい言い方をすると、viewに直接対応するデータが構築されることといえるかも
原義はより描画
ナビゲーション
ページを移動する
ページとは
ブラウザネイティブページ
観念上のページ
SPAで何がシングルなのか、ブラウザは単一だと認識している
データフェッチ
csr, ssr根本的な
モダンフロント的な意味合いと根本的な意味合いがあるよね
根本csrはjs解釈しないとコンテンツが読めないよね
コンテンツというのはページの重要な情報
ssrはjs uiとの相互に課題があるよね
なにができるできない
CDN載せ放題
完全に静的
ユーザーによって、時間とかによって変わらない
クライアントサイド完結
ユーザーが何か入力はするがサーバーを要しない
HTML可読
AI読めビリティ
動的性
動的コンテンツ
歴史的には
http server
httpサーバーフレームワーク
express
現代的にはhono
csrいにしえの
jqueryだろうがreactだろうが
client side routing bka spa
ルーティング
pathをみて内容をだし分ける行為
普通のやつはserver sideで行うがこれをclient sideで行う
location api, navigation api
アクセス時にレスポンスは/を使う
ここでのpageというのはwebブラウザ的な意味でのね
server side rendering with client navi
Next.js
SPAと同じナビゲーションを行う
初回アクセスはHTML
ssg
hugo, hexo
rails的なのをやって成果物をデプロイする
静的なのでCDN載せ放題
ssg with client side routing
gatsbyはroutingがspa
next ssg
pageごとにstaticなdynamicなpropsを持てるようになった
getStaticProps getDynamicProps
remix
全部CDNでやればssgとかしなくてもいけんじゃん単純だぜ
ブログとかのユースケースならガチで作れば全部MPAでやっても十分早いぜ
island architectureで必要なぶん宣言的UIできるぜ
next app router
data fetching単位でcache purgeしたい