CDN — How Content Delivery Networks Work

The Problem CDNs Solve

Without a CDN, every user — regardless of location — fetches content from your origin server.

User in Mumbai → request → Server in Virginia (150ms round trip)
User in London → request → Server in Virginia (80ms round trip)
User in Tokyo  → request → Server in Virginia (170ms round trip)

Physics limits how fast data can travel. A request from Mumbai to Virginia takes ~150ms just for the network round trip — before any processing.

A CDN solves this by caching content at edge nodes distributed globally.

User in Mumbai → CDN edge in Mumbai (2ms round trip)
User in London → CDN edge in London (5ms round trip)
User in Tokyo  → CDN edge in Tokyo  (3ms round trip)

How a CDN Works

Edge Nodes (Points of Presence)

CDN providers operate hundreds of servers (edge nodes / PoPs) distributed globally. When a user requests content:

1. DNS resolves to the nearest edge node (via Anycast or GeoDNS)
2. Edge node checks its cache
3. Cache hit → serve directly from edge (fast)
4. Cache miss → fetch from origin server, cache it, serve to user

First request (cache miss):
User → Edge Node → Origin Server → Edge Node caches → User
                                    (150ms)

Subsequent requests (cache hit):
User → Edge Node → User
        (2ms)

Cache TTL

The CDN respects cache headers from your origin:

Cache-Control: public, max-age=86400  // cache for 24 hours
Cache-Control: no-cache               // don't cache
Cache-Control: s-maxage=3600          // CDN caches for 1 hour, browser for default

What CDNs Cache

Static Assets (always cache)

• Images, videos, fonts
• CSS, JavaScript bundles
• HTML files (for static sites)
• PDF, ZIP downloads

Dynamic Content (sometimes cache)

• API responses (with appropriate TTL)
• Personalized pages (be careful — don't cache user-specific content)
• HTML pages with short TTL

What NOT to cache

• Authenticated API responses with user-specific data
• Real-time data (stock prices, live scores)
• POST/PUT/DELETE requests (CDNs only cache GET by default)

CDN Benefits Beyond Speed

Reduced Origin Load

If 90% of requests are served from edge cache, your origin server handles only 10% of traffic. This dramatically reduces infrastructure costs and protects against traffic spikes.

DDoS Protection

CDN edge nodes absorb attack traffic before it reaches your origin. Cloudflare, for example, has 100+ Tbps of network capacity — far more than any attacker can generate.

SSL Termination

CDNs handle SSL/TLS at the edge. Your origin can receive plain HTTP internally, reducing CPU overhead.

Compression

CDNs automatically compress responses with gzip/Brotli, reducing transfer size by 60-80%.

Cache Invalidation

When you deploy new assets, you need to invalidate the CDN cache.

Option 1: Cache Busting (best)

Include a hash in the filename. When the file changes, the filename changes — no invalidation needed.

app.abc123.js  → new deploy → app.def456.js

Webpack, Vite, and Next.js do this automatically.

Option 2: Versioned URLs

/static/v2/app.js  → new deploy → /static/v3/app.js

Option 3: Manual Purge

Most CDNs provide an API to purge specific URLs or paths.

curl -X DELETE "https://api.cloudflare.com/client/v4/zones/{zone_id}/purge_cache" \
  -d '{"files": ["https://example.com/app.js"]}'

CDN for APIs

CDNs can cache API responses too, but requires care:

Cache-Control: public, s-maxage=60  // CDN caches for 60 seconds
Vary: Accept-Encoding               // separate cache per encoding

Good candidates: Product listings, public blog posts, search results Bad candidates: User-specific data, real-time data, write operations

Popular CDN Providers

For most projects: Cloudflare (free tier is excellent) or Vercel (if already on Vercel).

CDN + Next.js

Next.js on Vercel automatically uses the Vercel Edge Network:

• Static assets served from edge
• SSG pages cached at edge
• ISR (Incremental Static Regeneration) revalidates at edge

For images, Next.js <Image> component automatically optimizes and caches via CDN.

Key Takeaway

• CDNs cache content at edge nodes close to users → dramatically lower latency
• Always cache static assets with long TTLs + cache busting via hashed filenames
• CDNs also reduce origin load, provide DDoS protection, and handle SSL
• Use Cache-Control headers to control what gets cached and for how long
• Cloudflare free tier is sufficient for most early-stage projects