CDN Architecture & Edge Caching

A CDN (Content Delivery Network) puts your content physically closer to users. Instead of every request traveling from Tokyo to your us-east-1 origin server, the CDN serves cached content from a Tokyo edge location. Latency drops from ~200ms to ~20ms. For static assets, a CDN is the single highest-impact performance optimization you can make.

---

CDN Architecture

User (Tokyo)                    User (London)
     │                               │
     ▼                               ▼
┌─────────────┐               ┌─────────────┐
│ Edge Tokyo  │               │ Edge London  │
│ (cached)    │               │ (cached)     │
└──────┬──────┘               └──────┬──────┘
       │ Cache MISS                   │ Cache MISS
       ▼                              ▼
┌──────────────────────────────────────────┐
│           Origin Shield (us-east-1)       │
│   (single point of origin fetch)          │
└──────────────────┬───────────────────────┘
                   │ Cache MISS
                   ▼
          ┌─────────────────┐
          │  Origin Server  │
          │  (your app)     │
          └─────────────────┘

---

Cache Strategy

Content Type	TTL	Cache-Control Header
Static assets (JS, CSS, images)	1 year	public, max-age=31536000, immutable
Fonts	1 year	public, max-age=31536000, immutable
HTML pages	0 (revalidate)	public, max-age=0, must-revalidate
API responses (public)	60-300 seconds	public, max-age=60, s-maxage=300
API responses (private)	0	private, no-store
User-specific content	Never cache at CDN	private, no-cache

---

CDN Selection

Provider	Strength	Network Size	Best For
CloudFlare	DDoS protection, Workers	310+ cities	Full-stack CDN + security
AWS CloudFront	AWS integration, Lambda@Edge	450+ PoPs	AWS-native applications
Fastly	Real-time purging, VCL control	90+ PoPs	API caching, instant purge
Akamai	Enterprise, massive network	4,100+ PoPs	Large enterprise, media
Vercel Edge	Next.js integration, serverless	Global	Next.js applications

---

Cache Invalidation

Strategy	Speed	Risk	Use Case
TTL expiry	Automatic	Stale until TTL	Static assets with content hashing
Purge by URL	Instant	None	Specific page update
Purge by tag/key	Instant	None	Category of content update
Purge everything	Instant	Origin overload	Emergency, major update
Stale-while-revalidate	Background	Serves stale briefly	Balance freshness + speed

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

Timeline:
0-60s:    Serve from cache (fresh)
60-360s:  Serve stale, fetch fresh in background
360s+:    Cache expired, wait for origin

---

Anti-Patterns

Anti-Pattern	Problem	Fix
No cache headers	CDN can’t cache, every request hits origin	Set Cache-Control on every response
Short TTL on static assets	Unnecessary origin traffic	Content hashing + 1-year TTL
Caching user-specific pages	User A sees User B’s data	Cache-Control: private for user content
No origin shield	Every edge PoP hits origin on cache miss	Enable origin shield (single PoP between edges and origin)
Cache everything mentality	Stale data served to users	Cache static, revalidate dynamic

---

Checklist

• CDN selected based on needs (security, integrations, edge compute)
• Cache-Control headers on every response
• Static assets: content-hashed filenames + 1-year TTL
• HTML: max-age=0, must-revalidate (or short TTL)
• API responses: cache public data, no-store for private
• Origin shield enabled to reduce origin load
• Cache invalidation: purge by URL/tag for content updates
• Monitoring: cache hit ratio (target > 90%), origin traffic

---

:::note[Source] This guide is derived from operational intelligence at Garnet Grid Consulting. For CDN architecture consulting, visit garnetgrid.com. :::