✍️ 필사 모드: CDN & Edge キャッシュ戦略 完全ガイド 2025: Cache Invalidation、ETag、Stale-While-Revalidate

強い一貫性 ←─────────────────→ 高い性能
 (リアルタイム)              (cache hit)

Cache-Control: public, max-age=3600, s-maxage=86400

Cache-Control: public, max-age=0, must-revalidate

Cache-Control: public, max-age=60, s-maxage=300, stale-while-revalidate=86400

Cache-Control: public, max-age=31536000, immutable

Cache-Control: private, no-store

HTTP/1.1 200 OK
ETag: "abc123"
Cache-Control: max-age=3600

GET /api/users/123 HTTP/1.1
If-None-Match: "abc123"

HTTP/1.1 304 Not Modified
ETag: "abc123"

HTTP/1.1 200 OK
Last-Modified: Tue, 15 Apr 2025 10:00:00 GMT

GET /api/users/123 HTTP/1.1
If-Modified-Since: Tue, 15 Apr 2025 10:00:00 GMT

HTTP/1.1 200 OK
Cache-Control: public, max-age=3600
Vary: Accept-Encoding, Accept-Language

ユーザー(ソウル) → [CDN PoP ソウル] (cache hit!) → 応答
                            ↓ miss
                      [Origin サーバー(米国)]

GET /api/users/123  → cache
GET /api/users/123?lang=en  → 別 cache(query string を含む)

const cacheKey = new Request(url, { method: 'GET' })
const cache = caches.default
const cached = await cache.match(cacheKey)

hit_ratio = cache_hits / (cache_hits + cache_misses)

Cache-Control: max-age=3600  // 1 時間後に期限切れ

curl -X POST https://api.cloudflare.com/zones/.../purge_cache \
  -H "Authorization: Bearer ..." \
  -d '{"files":["https://example.com/api/users/123"]}'

/static/main.abc123.js  →  /static/main.def456.js

# 単一 URL
curl -X POST "https://api.cloudflare.com/client/v4/zones/{zone_id}/purge_cache" \
  -H "Authorization: Bearer {api_token}" \
  -d '{"files":["https://example.com/page1"]}'

# タグベース(Enterprise)
curl -X POST ... -d '{"tags":["user-123"]}'

# 全体
curl -X POST ... -d '{"purge_everything":true}'

HTTP/1.1 200 OK
Cache-Tag: user-123, post-456, blog-list

curl -X POST https://api.fastly.com/service/{id}/purge/user-123

影響を受けるページ:
- /post/123 (該当の記事)
- /post/123/comments
- /user/abc/comments (投稿者ページ)
- /sidebar/recent-comments
- ... さらに多数

DB トランザクション commit → cache invalidation
                ↓ もし invalidation が失敗したら?
            stale data!

[cache 期限切れ] → [origin リクエスト] → [待機] → [応答]
                       ↑ ユーザーが待つ(遅い!)

Cache-Control: max-age=60, stale-while-revalidate=86400

ユーザー 1 (60s):   [cache hit, fresh]   instant
ユーザー 2 (61s):   [cache hit, stale]   instant (background 更新開始)
ユーザー 3 (62s):   [cache hit, fresh]   instant (更新直後)

export async function getStaticProps() {
  const data = await fetchData()
  return {
    props: { data },
    revalidate: 60  // 60 秒後に background で再生成
  }
}

Cache-Control: max-age=60, stale-if-error=86400

def get_user(user_id):
    user = cache.get(f"user:{user_id}")
    if user is None:
        user = db.query(f"SELECT * FROM users WHERE id={user_id}")
        cache.set(f"user:{user_id}", user, ttl=3600)
    return user

# cache ライブラリが自動処理
user = cache.get(f"user:{user_id}", loader=lambda: db.query(...))

def update_user(user_id, data):
    db.execute(f"UPDATE users SET ... WHERE id={user_id}")
    cache.set(f"user:{user_id}", data, ttl=3600)

def update_user(user_id, data):
    cache.set(f"user:{user_id}", data, ttl=3600)
    queue.push({"action": "update", "id": user_id, "data": data})

def get_user(user_id):
    user = cache.get(f"user:{user_id}")
    if user is None:
        with cache.lock(f"lock:user:{user_id}", timeout=10):
            user = cache.get(f"user:{user_id}")  # double-check
            if user is None:
                user = db.query(...)
                cache.set(f"user:{user_id}", user, ttl=3600)
    return user

def get_with_recompute(key):
    value, ttl = cache.get_with_ttl(key)
    if random() < ttl_factor(ttl):
        # 一部リクエストだけ前倒しで再計算
        recompute_async(key)
    return value

export default {
  async fetch(request) {
    const variant = Math.random() < 0.5 ? 'a' : 'b'
    return fetch(`https://origin.com/page-${variant}`)
  }
}

const country = request.cf.country
const origin = country === 'KR' ? 'asia.api.com' : 'us.api.com'
return fetch(origin + new URL(request.url).pathname)

const token = request.headers.get('Authorization')
const user = await verifyJWT(token)
if (!user) return new Response('Unauthorized', { status: 401 })
return fetch(origin)

const response = await fetch(origin)
return new HTMLRewriter()
  .on('h1', { element(el) { el.setInnerContent('Modified!') } })
  .transform(response)

const [user, posts] = await Promise.all([
  fetch('https://api.com/user/123').then(r => r.json()),
  fetch('https://api.com/posts?user=123').then(r => r.json())
])
return new Response(JSON.stringify({ user, posts }))

# CSS、JS (hash 付きファイル名)
Cache-Control: public, max-age=31536000, immutable

# 画像(あまり変わらない)
Cache-Control: public, max-age=86400, stale-while-revalidate=604800

# 頻繁に変わるが cache 可能
Cache-Control: public, max-age=0, s-maxage=300, stale-while-revalidate=86400

# ユーザー別データ (private)
Cache-Control: private, max-age=60, must-revalidate

# 公開 API
Cache-Control: public, max-age=60, s-maxage=300, stale-while-revalidate=86400

# 絶対に cache しない
Cache-Control: private, no-store

HTTP/1.1 200 OK
Content-Encoding: gzip
Cache-Control: public, max-age=3600
Vary: Accept-Encoding

curl -I https://example.com/api/users/123

HTTP/2 200
cf-cache-status: HIT
age: 234
cache-control: public, max-age=3600

HIT           ← cache から返却
MISS          ← origin リクエスト
EXPIRED       ← 期限切れ、更新中
REVALIDATED   ← 304 で検証済み
BYPASS        ← cache 迂回 (no-cache 等)
DYNAMIC       ← cache 不可

Cache-Control: public, max-age=0, s-maxage=3600, stale-while-revalidate=86400

Cache-Control: public, max-age=31536000, immutable

Cache-Control: public, max-age=300, stale-while-revalidate=86400

// Next.js + Cloudflare
async function updatePost(id, data) {
  await db.update(...)
  await cf.purgeByTags([`post-${id}`, 'homepage'])
}