CDN Edge Caching: Serving Content from Everywhere at Once

You Cannot Outrun Physics

In 2010, Google discovered that adding 500ms of latency to search results reduced traffic by 20%. Amazon found that every 100ms of latency cost them 1% in revenue. The physics problem is simple: light taking a round trip from Tokyo to Virginia takes about 150ms. Multiply by DNS + TLS + HTTP handshakes, and a page load takes over a second just in network latency. CDNs solve this by bringing the content closer to the user.

How CDN Edge Caching Works

Without CDN:

  User (Tokyo)  -------- 150ms -------->  Origin Server (Virginia)
  User (Tokyo)  <------- 150ms ---------  Origin Server (Virginia)
  Total: 300ms round trip (just network, before any processing)


With CDN (e.g., Cloudflare, CloudFront, Fastly):

  User (Tokyo) --- 5ms --->  CDN Edge (Tokyo)
  User (Tokyo) <-- 5ms ----  CDN Edge (Tokyo)
  Total: 10ms round trip (30x faster!)

  The CDN has 200+ edge locations worldwide.
  First request: edge fetches from origin, caches the response.
  Subsequent requests: served directly from edge.

  CDN Edge Flow:
  1. User requests /static/app.a3f2b1.js
  2. Tokyo edge: "Do I have this?" --> YES (cache hit) --> serve it
  3. If NO (cache miss) --> fetch from origin --> cache it --> serve it

What to Cache at the Edge

Content Type          Cache Strategy              TTL
--------------------  --------------------------  --------
JS/CSS bundles        Immutable + content hash    1 year
  (app.a3f2b1.js)     Cache-Control: immutable
Images/fonts          Content hash in URL          1 year
Video/audio           Cache at edge, stream        1 year
Blog posts (HTML)     Cache for logged-out users   5-60 min
API: product listing  Short TTL                    1-5 min
API: user dashboard   NEVER cache at edge          0
API: financial data   NEVER cache at edge          0

Cache-Control Headers: The Language of CDNs

You control CDN behavior entirely through HTTP headers:

# Static assets with content hash (cache forever)
Cache-Control: public, max-age=31536000, immutable
# The hash in the filename IS the version.
# app.a3f2b1.js will NEVER change. If code changes,
# the build produces app.c7d4e2.js (new hash = new URL).

# Semi-dynamic content (cache for 5 minutes)
Cache-Control: public, max-age=300
# Acceptable staleness: user sees data up to 5 min old

# Personalized/sensitive responses (never cache)
Cache-Control: private, no-store
# CDN passes through to origin every time

# Two-tier caching (different TTL for CDN vs browser)
Cache-Control: public, max-age=60       # Browser caches 1 min
CDN-Cache-Control: max-age=3600         # CDN caches 1 hour
# Cloudflare, Fastly support this pattern

Cache Purging: When You Need to Update NOW

Sometimes you cannot wait for TTL to expire - a legal issue, a broken image, a pricing error. CDNs offer purge mechanisms:

• Single URL purge: purge /images/wrong-price.jpg on all edges

• Wildcard purge: purge /api/products/* to clear all product caches

• Tag-based purge: tag responses with 'product-42' and purge by tag (Fastly Surrogate-Key, Cloudflare Cache-Tag)

• Full cache purge: nuclear option - clears everything, causes a thundering herd to origin

CDN Comparison for System Design

CDN             Edge Locations  Best For                    Cost Model
--------------  --------------  --------------------------  ----------
Cloudflare      310+ cities     General web, DDoS protect   Per-plan
AWS CloudFront  450+ locations  AWS-integrated apps         Per-GB
Fastly          90+ POPs        Real-time purging, compute  Per-GB
Akamai          4,100+ servers  Enterprise, video streaming Per-contract
Vercel Edge     All Cloudflare  Next.js/React apps          Per-request

Interview Tip

When an interviewer asks about performance optimization, mention CDN early: 'I would put a CDN like CloudFront in front of the application. Static assets get immutable caching with content-hash URLs for 1-year TTL. API responses for public data get 1-5 minute TTLs. Personalized responses bypass the CDN entirely with Cache-Control: private, no-store. This reduces origin load by 80%+ and gives users sub-10ms response times for cached content worldwide.'

Key Takeaway

CDNs reduce latency by serving content from geographically close servers. Cache static assets aggressively with content-hash URLs. Cache public API responses with short TTLs. Never cache personalized or sensitive data at the edge. The correct Cache-Control headers are all you need to make a CDN work.