✍️ 필사 모드: CDN & Edge 캐싱 전략 완전 가이드 2025: Cache Invalidation, ETag, Stale-While-Revalidate

강한 일관성 ←─────────────────→ 높은 성능
   (실시간)                    (캐시 적중)

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 서울] (캐시 hit!) → 응답
                        ↓ miss
                    [Origin 서버 (미국)]

GET /api/users/123  → 캐시
GET /api/users/123?lang=en  → 다른 캐시 (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 → 캐시 무효화
                ↓ 만약 캐시 무효화가 실패하면?
            stale data!

[캐시 만료] → [origin 요청] → [기다림] → [응답]
                   ↑ 사용자가 기다림 (slow!)

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

사용자 1 (60초):    [캐시 hit, fresh]    instant ✅
사용자 2 (61초):    [캐시 hit, stale]    instant ✅ (백그라운드 갱신 시작)
사용자 3 (62초):    [캐시 hit, fresh]    instant ✅ (방금 갱신됨)

export async function getStaticProps() {
  const data = await fetchData()
  return {
    props: { data },
    revalidate: 60  // 60초 후 백그라운드 재생성
  }
}

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

# 캐시 라이브러리가 자동 처리
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 (해시 파일명)
Cache-Control: public, max-age=31536000, immutable

# 이미지 (잘 안 변함)
Cache-Control: public, max-age=86400, stale-while-revalidate=604800

# 자주 변하지만 캐시 가능
Cache-Control: public, max-age=0, s-maxage=300, stale-while-revalidate=86400

# 사용자 별도 데이터 (private)
Cache-Control: private, max-age=60, must-revalidate

# 공개 API (public)
Cache-Control: public, max-age=60, s-maxage=300, stale-while-revalidate=86400

# 절대 캐시 안 됨
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           ← 캐시에서 반환
MISS          ← origin 요청
EXPIRED       ← 만료, 갱신 중
REVALIDATED   ← 304로 검증됨
BYPASS        ← 캐시 우회 (no-cache 등)
DYNAMIC       ← 캐시 못 함

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'])
}