- SSRは「毎回レンダリングする」わけではない
- SPAとSSRのキャッシュの違い
- CDNが得意なもの
- エッジキャッシュとは何か
- Cache-Controlヘッダの役割
- なぜSPAはCDNと相性が弱いのか
- キャッシュが破綻するケース
- エッジで再生成する仕組み（ISR）
- 結局、何が起きているのか
SSRは「毎回レンダリングする」わけではない
SSR（Server Side Rendering）はサーバでHTMLを生成する仕組みのため、「アクセスのたびに処理が走って重い」と言われがちです。確かに何も対策をしなければその通りですが、実際の運用ではそうはなりません。
理由はシンプルで、SSRはHTMLを生成する技術であると同時に、HTMLをキャッシュできる技術だからです。
そして、このキャッシュの仕組みがCDN（Content Delivery Network）と非常に相性が良いのです。
SPAとSSRのキャッシュの違い
まず、SPAとSSRで「キャッシュできる対象」が根本的に違います。
| 方式 | 主にキャッシュできるもの |
| SPA | JS・CSS・画像（静的ファイル） |
| SSR | HTMLそのもの |
SPAではブラウザはHTMLを受け取った後、JSを実行して画面を組み立てます。そのためページの内容はキャッシュできません。キャッシュされるのはアプリ本体のJSです。
一方SSRでは、完成したHTMLがレスポンスとして返ります。つまり完成済みのページを丸ごとキャッシュ可能です。
ここがCDNとの相性を決定づけています。
CDNが得意なもの
CDNは本来「静的ファイル配信」のための仕組みです。
- 画像
- CSS
- JavaScript
- HTML（静的）
CDNは処理を実行できません。プログラムは動かせず、保存されたレスポンスを返すだけです。
しかしSSRで生成されたHTMLは、次の瞬間から「静的ファイル」として扱えます。つまり、
動的に作られたページを、静的ページとして配布できる
これがSSRとCDNの組み合わせの本質です。
エッジキャッシュとは何か
CDNのサーバは世界各地に配置されています。これをエッジサーバと呼びます。
エッジキャッシュは「ユーザーに最も近いサーバにレスポンスを保存する」仕組みです。
通常のSSR：
1. ユーザー → 日本
2. アプリサーバ → 東京
3. HTML生成
4. 返答
エッジキャッシュあり：
1. ユーザー → 大阪
2. CDN（大阪） → キャッシュヒット
3. 即返答
ここではアプリサーバは呼ばれません。
つまりSSRのCPU処理がゼロになります。
Cache-Controlヘッダの役割
CDNがキャッシュするかどうかはHTTPヘッダで決まります。
Cache-Control: public, s-maxage=60, stale-while-revalidate=300
意味は次の通りです。
- s-maxage：CDNのキャッシュ時間
- stale-while-revalidate：裏で更新しながら古いHTMLを返す
これにより、1分ごとにサーバが再生成し、それ以外のアクセスはCDNが応答します。
結果として、ユーザーには常に高速、サーバ負荷は最小になります。
なぜSPAはCDNと相性が弱いのか
SPAもCDNを使えますが、効果の出方が違います。
CDNで配布できるのはJSファイルまでです。
ページ表示の流れ：
1. JS取得（CDN）
2. API通信（アプリサーバ）
3. 描画
ここで必ずアプリサーバに到達します。
つまり、アクセス数が増えるとAPIサーバの負荷は増え続けます。
一方SSR+CDNでは：
1. HTML取得（CDN）
2. 描画完了
アプリサーバに到達しないケースが大量に発生します。
これがスケーラビリティの差になります。
キャッシュが破綻するケース
SSRキャッシュにも弱点があります。
ユーザー固有のページです。
例：
- マイページ
- カート
- 管理画面
これらをキャッシュすると、他人の情報が表示されます。そのため以下のヘッダが必要です。
Cache-Control: private, no-store
つまりSSRは「全ページをキャッシュできる」わけではありません。公開コンテンツ向けの技術です。
エッジで再生成する仕組み（ISR）
最近のフレームワークではISR（Incremental Static Regeneration）が使われます。
仕組み：
1. 初回アクセスでSSR実行
2. CDNへ保存
3. 次回以降はCDN応答
4. 有効期限後に裏で再生成
ユーザーは常に高速ページを受け取り、サーバは必要なときだけ動きます。
これは静的サイトと動的サイトの中間の動作です。
結局、何が起きているのか
SSRの価値は「サーバで描画すること」ではありません。
HTMLをキャッシュ可能なレスポンスに変換することです。
SPA
「アプリを配布する」
SSR+CDN
「完成したページを配布する」
エッジキャッシュはこの後者を最大化します。
パフォーマンス改善とはCPUを速くすることではなく、CPUを使わない回数を増やすことです。
SSRが大規模サイトで選ばれる理由はレンダリング方式ではありません。CDNによって、アクセスが増えるほどサーバが暇になる構造を作れるからです。
