✍️ 필사 모드: CDN Complete Guide — Cache, Edge Compute, Origin Shield, and HTTP Caching Headers (2025)

Intro — 99% of the Web You See Comes From the Edge

In 2026, when you hit any major website, almost every byte you receive arrives from an edge server, not the origin. Cloudflare runs in 300+ cities, Akamai in 4,000+ locations, Fastly in dozens of major PoPs. These edges cache HTML, images, JS, video, apply rules in real time, terminate TLS, and absorb DDoS.

Without this layer, the modern web is impossible. Netflix streams 1EB per day without melting origins because of edge. A news site surviving a viral article, shoppers hitting a site on Black Friday at 1000x normal load, global users getting similar latency — all of it depends on edge caching.

This post follows naturally from the DNS deep dive. Once DNS routes a user to an edge PoP, we trace what happens at the byte level.

1. A Short History of the CDN

1.1 The Birth of Akamai

In 1995, MIT math professor Tom Leighton and PhD student Danny Lewin asked: how do we distribute web content globally at speed? Their insight was mathematical — use consistent hashing to spread content across many servers and route users to the nearest one.

Akamai Technologies launched in 1998. In 1999 a Super Bowl site went down and Akamai absorbed the traffic, putting the CDN concept on the industry map.

During 9/11 in 2001, major news sites survived thanks to Akamai. CNN, ESPN, and Fox News standardized on it afterward.

1.2 New Generations

• Mid-2000s: CloudFront, Limelight, EdgeCast emerge.
• 2010: Cloudflare founded, bundling DDoS protection and CDN on a free plan.
• 2011: Fastly founded with "Instant Purge" — cache invalidation within 150ms worldwide.
• 2017: Cloudflare Workers announced, powered by V8 Isolates.
• 2019: Fastly Compute@Edge, WebAssembly and Rust based.
• 2020–2024: Netflix, AWS, Meta increasingly build their own CDNs.

Major 2026 players: Cloudflare (leader, developer-friendly), Akamai (enterprise, security), Fastly (performance), Amazon CloudFront, Google Cloud CDN, Azure CDN, Bunny.net, KeyCDN.

1.3 Why CDN (The Math of Latency)

Light travels 300,000 km/s, roughly 2/3 of that through fiber. Seoul to New York is 11,000 km one way — minimum 55ms one-way, 110ms RTT. Real-world routing and queueing push it to 180–250ms.

A TLS and HTTP exchange of 3–4 RTTs approaches one second. From click to response, that is a UX disaster.

The CDN shortens physical distance: a Seoul user hitting a Seoul edge sees 5–10ms RTT even if the true origin is in the US. You do not beat physics, you sidestep it.

2. The Three Pillars of a CDN

2.1 Routing Trinity

Three mechanisms route users to the nearest edge:

1. Anycast BGP: the same IP is advertised from many regions; BGP picks the "nearest."
2. DNS-based routing (GSLB): the authoritative server returns a region-appropriate IP.
3. HTTP redirects: legacy fallback.

Most major CDNs combine Anycast and GSLB.

2.2 Anycast — Pros and Cons

Pros: no DNS changes needed, BGP-speed failover, simple ops. Cons: BGP sees network distance, not server load; route flaps drop TCP connections; geography and network path do not always align (a Saudi request can land in the Netherlands).

2.3 GSLB

DNS-based. The authoritative server returns an edge IP matching the requester's region (more accurate with EDNS Client Subnet).

(Tokyo user)  -> resolver -> Authoritative "www.example.com?"
                          <- Authoritative "192.0.2.100" (Tokyo PoP)

(London user) -> resolver -> Authoritative "www.example.com?"
                          <- Authoritative "203.0.113.50" (Amsterdam PoP)

Pros: considers load, latency, regulation. TCP connection stays pinned to one edge. Cons: DNS TTL bounds routing change speed; public resolver locations may differ from users.

2.4 PoP (Point of Presence)

A physical cluster of CDN servers in one region. Typically located inside a Tier-1 ISP or at an IXP. Dozens to hundreds of servers, load balancers, edge nodes, cache storage. Direct peering with Tier-1 ISPs yields better BGP paths.

Cloudflare has 300+ cities, Akamai 4,000+ locations. The gap is strategy: Cloudflare favors large PoPs at key IXPs; Akamai embeds many small servers deep inside ISPs.

3. Cache Key — The Fundamental Decision

3.1 The Role

The cache key identifies objects in the cache. Correct design determines hit rate.

Default:

scheme + host + path + querystring

Example: https://example.com/images/hero.jpg?w=800 becomes the whole cache key.

3.2 The Vary Header — Where Complexity Begins

The Vary response header tells the CDN "this response varies based on these request headers."

Cache-Control: public, max-age=3600
Vary: Accept-Encoding, Accept-Language

The CDN extends the key to URL + Accept-Encoding + Accept-Language. Same URL, different entries for gzip vs br.

Vary traps:

1. Vary: User-Agent — per-browser cache, destroys hit rate. Never.
2. Vary: Cookie — almost every request has unique cookies. Cache useless.
3. Too many Vary values — combinatorial explosion.

3.3 Query String Normalization

?utm_source=twitter and ?utm_source=facebook serve identical content but become different keys. Use the CDN's normalization to strip utm_* before cache lookup (Cloudflare Cache Rules, Fastly VCL).

3.4 Cookies and Personalization

With cookies, default to bypassing cache. When a specific cookie matters, split explicitly: cache anon users statically, cache logged-in with SSR. A/B tests can use a ab_variant cookie.

3.5 Device Type Splitting

Use Client Hints like Sec-CH-UA-Mobile. Do not Vary on the whole User-Agent — parse at origin and translate into a narrow header like X-Device-Type.

4. HTTP Caching Headers — Precise Semantics

4.1 Cache-Control

Most important header. Key directives:

• public / private: any cache vs browser only.
• no-cache: cache but always revalidate.
• no-store: never cache.
• max-age=N: fresh for N seconds.
• s-maxage=N: CDN-only max-age.
• immutable: content never changes (fonts, hashed JS).
• stale-while-revalidate=N: serve stale for N seconds while refreshing in background.
• stale-if-error=N: serve stale on origin error.

4.2 Typical Patterns

Static assets with hashed filename:

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

HTML:

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

Public API:

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

Personalized: Cache-Control: private, no-cache. Sensitive: Cache-Control: no-store.

4.3 ETag and Conditional Requests

An ETag identifies a response version. Browser or CDN revalidates with If-None-Match: "a3f2b1c4". If unchanged, the server returns 304 Not Modified without a body.

Strong ETag ("abc") means byte-identical; weak (W/"abc") means semantically equivalent.

4.4 Last-Modified / If-Modified-Since

Time-based alternative. Second resolution, clock issues — modern systems prefer ETag.

4.5 stale-while-revalidate — Most Underrated

Cache-Control: max-age=10, stale-while-revalidate=3600

After expiry, for 1 hour: (1) serve cached stale immediately, (2) fetch from origin in background, (3) subsequent requests get fresh. Users always experience cache speed; origin gets one refresh. Supported on Cloudflare, Fastly, CloudFront.

4.6 Age and X-Cache

CDN adds: Age: 123, X-Cache: HIT, X-Cache-Hits: 5, CF-Cache-Status: HIT. Standard debugging tools.

5. Origin Shield and Tiered Caching

5.1 The Problem

Hundreds of edge PoPs fronting the same origin. When a popular object expires, hundreds of edges hit origin at once — origin explodes. Thundering herd.

5.2 Origin Shield

Insert a single intermediate layer:

User -> Edge PoPs (hundreds) -> Origin Shield PoP (1 or few) -> Origin

Edge miss queries Shield; Shield miss queries origin. Origin load drops 10–100x.

5.3 Implementations

• Cloudflare Tiered Cache / Argo Smart Routing.
• AWS CloudFront Origin Shield (designate a region).
• Akamai Tiered Distribution (native to architecture).
• Fastly Shielding (choose a PoP per query).

5.4 Cache Coalescing

When many concurrent requests miss the same object, edge fetches once and waits the rest. Nginx proxy_cache_lock, Cloudflare automatic, Fastly default. Thousands of viral-content viewers result in a single origin request.

5.5 Hierarchy Evolution

Browser cache
 -> Service Worker cache
 -> CDN Edge cache
 -> CDN Regional cache
 -> Origin Shield
 -> Origin

With each layer at 95%+ hit ratio, origin sees 0.001% of traffic. That is the real number behind "99.9% offload" marketing.

6. Purge — The Art of Invalidation

6.1 Why Purge Is Hard

Invalidating caches across hundreds of PoPs simultaneously requires a global message bus. Sequential purge leaves stale content in some regions for seconds to minutes.

6.2 Strategies

• By URL: most common.
• By tag (surrogate key): response carries Surrogate-Key: product-123; purge by tag invalidates hundreds of related pages. Fastly pioneered this.
• By prefix: /products/* style.
• Full purge: emergency only.

6.3 Speed

Cloudflare: ~30s globally, 150ms by tag. Fastly: 150ms. CloudFront: 10–15 minutes — slow enough to shape architecture.

6.4 Versioned URLs

<link rel="stylesheet" href="/static/app.v3f2b1a.css">

New deploy: new hash, update HTML only (short TTL). Old cached files die naturally. Most SPAs, Next.js, SvelteKit use this. If URL changes, no purge needed.

6.5 Soft vs Hard Purge

Soft purge marks entries stale and uses SWR for immediate response plus background refresh. Much smoother UX. Fastly introduced it; most CDNs now support.

7. Edge Compute — Code Moves to the Edge

7.1 Why

Static caching cannot handle A/B branching, auth, geo redirects, personalization, light API transforms. Doing those at origin adds RTT. Doing them at edge keeps latency low.

7.2 Cloudflare Workers — V8 Isolate Model

Announced 2017. V8 isolates — not containers or VMs, but JS-engine-level sandboxes.

export default {
  async fetch(request, env, ctx) {
    const url = new URL(request.url);
    if (url.pathname === '/hello') {
      return new Response('Hello from edge!');
    }
    return fetch(request);
  }
};

Cold start under 5ms vs 100ms+ for containers. 128MB per isolate, 10–50ms CPU. Thousands of workers in one process.

7.3 Workers Ecosystem

• KV: global key-value, eventual consistency.
• Durable Objects: single-instance stateful actors.
• D1: SQLite edge DB.
• R2: S3-compatible object storage, no egress fees.
• Queues, Analytics Engine, Workers AI (LLM inference).

Backend-as-a-service at edge.

7.4 Fastly Compute@Edge — WebAssembly

2019, Wasmtime running WebAssembly. Rust, AssemblyScript, TinyGo.

use fastly::http::StatusCode;
use fastly::{Request, Response};

#[fastly::main]
fn main(req: Request) -> Result<Response, Error> {
    if req.get_path() == "/hello" {
        return Ok(Response::from_status(StatusCode::OK)
            .with_body_text_plain("Hello from WASM!"));
    }
    Ok(req.send("origin_0")?)
}

Cold start under 50ms. Each request gets an independent WASM instance.

7.5 AWS Lambda@Edge vs CloudFront Functions

Lambda@Edge: full Lambda, Node.js or Python, 100ms+ cold start, four execution points. CloudFront Functions: 2021, V8-based, sub-1ms, viewer-only. AWS answer to Workers.

7.6 Vercel Edge Functions

Vercel abstracts on top of Cloudflare Workers. Next.js export const runtime = 'edge' runs on edge. By 2026 Next.js, Astro, Remix, SvelteKit all support edge runtimes.

7.7 Limits

CPU and memory limits, no filesystem, limited long-lived connections, harder debugging. Heavy work still belongs at origin.

8. Image and Video Optimization

8.1 Why Images Matter

Over 50% of page bytes are images. Optimization equals UX plus money.

8.2 Formats

• JPEG: universal fallback.
• PNG: lossless, transparency.
• WebP (2010): 25–35% smaller than JPEG.
• AVIF (2019): 30% smaller than WebP.
• JPEG XL: high-quality lossless, Chrome flag experiment.

8.3 Content Negotiation

Browser sends Accept: image/avif,image/webp,.... CDN returns best supported format under one URL. Cloudflare Polish, Fastly Image Optimizer, Imgix, Cloudinary.

8.4 Responsive Images

<img src="hero.jpg"
     srcset="hero-400.jpg 400w, hero-800.jpg 800w, hero-1200.jpg 1200w"
     sizes="(max-width: 600px) 100vw, 50vw">

CDN generates each variant on demand with ?width=800&format=auto. Each URL is a separate cache key.

8.5 Video — HLS and DASH

HTTP-based adaptive streaming. HLS (Apple) uses .m3u8 plus .ts; DASH uses .mpd; CMAF unifies. Video encoded in multiple resolutions and bitrates, chopped into 2–10s segments. From the CDN view these are many small static files, extremely cache-friendly.

8.6 Perceptual Metrics

PSNR (outdated), SSIM, VMAF (Netflix, 2016) — ML-predicted human judgment, industry standard. Netflix encodes each title in hundreds of combinations and picks top VMAF, saving 20% bandwidth.

9. TLS Termination and Security

9.1 TLS at Edge

User to edge TLS, edge to origin another TLS (or private). Centralized cert management, fast rollout of TLS/QUIC, shorter handshake RTT.

9.2 Universal SSL (Cloudflare, 2014)

Free SSL for all customers via SNI. Revolutionary pre-Let's Encrypt. Now extended to HTTP/3, ECH.

9.3 Protecting the Origin

An exposed origin defeats the edge. Defenses: Authenticated Origin Pulls (mutual TLS), IP allowlists for CDN ranges, hiding origin DNS, Cloudflare Tunnel (outbound-only origin).

9.4 DDoS Absorption

CDN has Tbps capacity; small origins have Gbps. Edge absorbs attack. Cloudflare advertises 228 Tbps (2025). Largest documented attack: 398 Tbps HTTP/2 Rapid Reset (2023), mitigated by Cloudflare, Google, AWS.

9.5 Bot Management

30–50% of traffic is bots. Legit (Googlebot) vs malicious (scrapers, credential stuffing). CDN tooling: TLS/HTTP2 fingerprints (JA3), JS challenges, Turnstile, behavioral, ML bot scoring.

9.6 WAF

SQL injection, XSS, RCE blocked at edge. OWASP CRS as baseline, custom rules, ML for anomalies. Cloudflare WAF, AWS WAF, Akamai AppSec replacing F5 and Imperva on-prem.

10. Bandwidth Economics

10.1 Egress Truth

AWS S3, GCS, Azure Blob bill egress (outbound). 2024 AWS: $0.09/GB under 100TB. 100TB month =$9,000.

10.2 CDN Math

CDN is typically 1/3 to 1/5 of AWS egress: Cloudflare ~$0.02/GB, Fastly$0.12/GB, CloudFront $0.085/GB, Bunny.net$0.01/GB. Combined with high hit ratio, origin egress drops 99%+.

10.3 R2, B2 — Zero Egress

Cloudflare R2 and Backblaze B2 offer zero egress. R2: S3-compatible, $0 egress,$0.015/GB storage. Bandwidth Alliance (Cloudflare, Backblaze, DigitalOcean, Wasabi) cross-egress free.

10.4 Peer-Assisted

Netflix Open Connect places boxes inside ISPs; ISP users get video from inside the ISP, saving ISP transit. P2P via WebTorrent or Peer5 is niche due to licensing.

10.5 Hit Ratio Economics

95% to 99% hit ratio cuts origin cost 5x. Key design, TTL, and purge strategy have enormous ROI.

11. Practical Configuration

11.1 Cache-Control Templates

# Hashed static
Cache-Control: public, max-age=31536000, immutable

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

# Public API
Cache-Control: public, max-age=10, s-maxage=60, stale-while-revalidate=300

# Personalized
Cache-Control: private, max-age=0, must-revalidate

# Sensitive
Cache-Control: no-store

11.2 Cloudflare Cache Rules

# /static/* long cache
Match: (http.request.uri.path matches "^/static/")
Action: Cache Everything, Edge TTL 1y, Browser TTL 1y

# /api/* bypass
Match: (http.request.uri.path matches "^/api/")
Action: Bypass

# bypass on login cookie
Match: (http.cookie contains "logged_in=1")
Action: Bypass

11.3 Fastly VCL

sub vcl_recv {
    set req.url = std.tolower(req.url);
    set req.url = regsuball(req.url, "(utm_[^&=]+|fbclid|gclid)=[^&]+&?", "");
    set req.url = regsub(req.url, "[?&]$", "");
    if (req.http.Cookie ~ "session=") {
        return(pass);
    }
}

sub vcl_fetch {
    if (beresp.http.Cache-Control !~ "stale-while-revalidate") {
        set beresp.http.Cache-Control = beresp.http.Cache-Control + ", stale-while-revalidate=3600";
    }
}

11.4 Next.js Edge Optimization

module.exports = {
  async headers() {
    return [
      {
        source: '/_next/static/:path*',
        headers: [{ key: 'Cache-Control', value: 'public, max-age=31536000, immutable' }]
      },
      {
        source: '/',
        headers: [{ key: 'Cache-Control', value: 'public, max-age=0, s-maxage=300, stale-while-revalidate=86400' }]
      }
    ];
  }
};

11.5 Metrics

Cache hit ratio target above 90%. Watch origin RPS, p99 latency by region, egress bytes, 5xx rate.

11.6 Anti-Patterns

• No Cache-Control set, relying on heuristics.
• Vary: User-Agent.
• Caching cookie-dependent pages — data leaks.
• PII in query strings.
• Abusive global purge.
• CDN overriding origin Cache-Control silently.

12. Trends

12.1 HTTP/3 at Edge

Default on Cloudflare, Fastly, CloudFront. Connection migration benefits mobile users switching Wi-Fi and cellular.

12.2 Streaming SSR

React Server Components and Next.js App Router streaming fit edge beautifully: sub-ms TTFB, progressive HTML.

12.3 Edge AI

Cloudflare Workers AI, Fastly AI Accelerator run LLM inference near users. GPUs in major PoPs, nearest-GPU routing from the rest.

12.4 Zero Trust

Cloudflare One, Akamai Zero Trust, Zscaler — CDN edge becomes corporate network gateway, replacing VPN with identity-based access.

12.5 WebAssembly Components

Component Model enables safe multi-language composition. Fastly Compute@Edge leads.

13. Operator Tips

13.1 Debugging

curl -I https://example.com/page
curl -I https://example.com/page -H "X-Cloudflare-Debug: 1"

Check CF-Cache-Status, X-Cache, Age. Repeated MISS means revisit cache key.

13.2 Warming

After deploy or new region, pre-request critical URLs:

while read url; do
  for region in US EU APAC; do
    curl -H "X-Test-Region: $region" "$url" > /dev/null &
  done
done < critical-urls.txt

13.3 A/B at Edge

export default {
  async fetch(req) {
    const cookie = req.headers.get('Cookie') || '';
    let variant = cookie.match(/exp=(\w)/)?.[1];
    if (!variant) {
      variant = Math.random() < 0.5 ? 'A' : 'B';
    }
    const url = new URL(req.url);
    if (variant === 'B') url.pathname = '/v2' + url.pathname;
    const resp = await fetch(url, req);
    const newResp = new Response(resp.body, resp);
    newResp.headers.append('Set-Cookie', `exp=${variant}; Max-Age=2592000`);
    return newResp;
  }
};

Origin stays oblivious; per-user variant stays sticky via cookie.

13.4 Incident Triage

"Origin suddenly seeing huge traffic": check hit ratio drop, recent purges, Cache-Control changes, 5xx spike (uncached), new Vary values. Temporary response: enable Origin Shield, force Edge TTL, WAF rules.

13.5 Cache Poisoning

Attacker manipulates headers; origin produces poisoned response; CDN caches; everyone gets infected. Example: X-Forwarded-Host: attacker.com ending up in generated links. Defenses: strip suspicious headers, keep cache key to trusted inputs, canonicalize. James Kettle's 2018 DEF CON talk is the classic reference.

Closing — Bytes Next to Users

The essence of a CDN is simple: keep bytes next to users. That simple rule powers the speed and economics of the modern web.

Three operator reflexes:

1. Measure cache hit ratio. 90%+ baseline.
2. Set Cache-Control deliberately. Always add SWR.
3. Use Origin Shield / tiered cache. Free wins.

Three recent posts trace a request from routing to response:

• DNS: name resolution.
• TLS 1.3 + QUIC: secure channel.
• CDN (this post): the actual delivery.

Next up: Git internals — object model, refs, packfiles, rebase under the hood.