Domain 145 / 225
Edge Rendering とキャッシュ戦略は TTFB 改善で SEO を底上げする
Edge / Cache の要点
エッジレンダリングはユーザー近接サーバで HTML 生成し TTFB を大幅短縮。Cache-Control の max-age + stale-while-revalidate で「速い + 新しい」を両立。Vercel / Cloudflare Workers / Fastly Compute@Edge が主要プラットフォーム
なぜこれを学ぶか
TTFB（Time to First Byte）は LCP の主要構成要素で、サーバ応答が遅いと SEO 全体に響く。 エッジレンダリング + 適切なキャッシュ戦略で TTFB を 100ms 以下にできる。
サイト速度を抜本改善したい担当者で必須。
学ばないと起きること
| よくある事故 | 被害 |
|---|---|
| Origin サーバのみで配信 | TTFB 500ms 超 → LCP 不良 |
| キャッシュ戦略なし | 同じレンダリングを毎回生成 |
学ぶメリット
- TTFB を 100ms 以下に
- LCP / SEO 評価向上
- 商談で「Edge + SWR キャッシュ」を即答
仕組み
Edge Rendering の主要プラットフォーム
| プラットフォーム | 特徴 |
|---|---|
| Vercel Edge Runtime | Next.js 統合、グローバル PoP |
| Cloudflare Workers | 200+ PoP、独自ランタイム |
| Fastly Compute@Edge | Wasm ベース、高速 |
| AWS Lambda@Edge | CloudFront 統合 |
| Deno Deploy | Deno 製、エッジ実行 |
ユーザーから物理的に近い PoP で実行。
Cache-Control ヘッダ
Cache-Control: public, max-age=3600, s-maxage=86400, stale-while-revalidate=604800
| ディレクティブ | 意味 |
|---|---|
| public | CDN キャッシュ可 |
| max-age=3600 | ブラウザ 1 時間 |
| s-maxage=86400 | CDN 24 時間 |
| stale-while-revalidate=604800 | 期限切れ後 7 日間は古いデータ配信 + 裏で更新 |
stale-while-revalidate の効果
公式: SWR はキャッシュ戦略の革命:
- ユーザー: 即時応答（古い HTML）
- 裏側: 最新版を取得 / キャッシュ更新
- 次回: 最新版が即時応答
「速い」と「新しい」の両立。
Vercel ISR
Next.js の ISR は SWR の応用:
export const revalidate = 3600; // 1 時間
または on-demand revalidate:
import { revalidatePath } from 'next/cache';
revalidatePath('/blog/article-1');
キー概念
TTFB 削減の段階
| 段階 | TTFB |
|---|---|
| Origin サーバ（日本→米国） | 500-1000ms |
| Origin + CDN キャッシュヒット | 100-200ms |
| Edge Rendering | 50-100ms |
| Edge + キャッシュ | 30-50ms |
エッジ + キャッシュで Origin の 1/10 以下。
Cache-Control の選択ガイド
| コンテンツ | 推奨設定 |
|---|---|
| 静的アセット（CSS / JS） | public, max-age=31536000, immutable |
| 静的画像 | public, max-age=31536000 |
| HTML（更新あり） | public, max-age=0, s-maxage=3600, swr=86400 |
| API（パブリック） | public, max-age=60, s-maxage=300 |
| 認証後ページ | private, no-store |
CDN キャッシュ無効化
更新時に CDN キャッシュを Purge:
- Cloudflare: API / ダッシュボードで Purge
- Fastly: タグベース無効化
- Vercel: revalidatePath / revalidateTag
よくある誤解
| よくある誤解 | 実際のところ | 出典 |
|---|---|---|
| キャッシュは静的サイトのみ | 動的サイトも SWR / ISR でキャッシュ可 | HTTP Cache MDN |
| Edge Rendering は速いだけ | TTFB / LCP で SEO 評価向上 | 同上 |
実務での適用
速度改善の優先順位
- CDN 導入（Origin サーバ前）
- Cache-Control 適切設定
- Edge Rendering 検討
- SWR / ISR で動的コンテンツも高速化
- Service Worker でブラウザキャッシュ
キャッシュ無効化フロー
[更新発生]
↓
[Origin 更新]
↓
[CDN Purge API 呼び出し]
↓
[次のリクエストで新版配信]
トラブル別の対処
| 症状 | 確認すべきこと |
|---|---|
| TTFB 500ms 超 | CDN / Edge Rendering / Origin 距離 |
| 古い情報残る | キャッシュ無効化 / SWR 期間 |
公式ソース
自己テスト
Q1. stale-while-revalidate の効果は？
期限切れ後の指定期間、古いデータを配信しつつ裏で更新。「速い + 新しい」両立
Q2. Edge Rendering の TTFB 改善効果は？
Origin の 1/10 以下、30-50ms 程度に短縮可能
Q3. 主要 Edge Rendering プラットフォームは？
Vercel Edge / Cloudflare Workers / Fastly Compute@Edge / AWS Lambda@Edge
これらの内容を採点付きで挑戦したい場合は、本ドメインのプロ試験で 5 問形式で確認できる。