Content Delivery Networks (CDN)
A Content Delivery Network (CDN) is a geographically distributed network of proxy servers (Edge Points of Presence - PoPs) that caches content near end users to drastically minimize latency and offload traffic from origin servers.
1. How a CDN Works
flowchart TB
U1["🇬🇧 User in London"] --> E1["⚡ Edge PoP (London)"]
U2["🇯🇵 User in Tokyo"] --> E2["⚡ Edge PoP (Tokyo)"]
E1 -->|"Cache HIT"| R1["✅ Serve (20ms)"]
E1 -->|"Cache MISS"| Origin["🏢 Origin Server (Virginia)"]
E2 -->|"Cache HIT"| R2["✅ Serve (25ms)"]
E2 -->|"Cache MISS"| Origin
Origin -->|"Fetches & caches at Edge"| E1
Origin -->|"Fetches & caches at Edge"| E2
2. Push vs Pull CDN
| Paradigm | How It Operates | Advantages | Disadvantages |
|---|---|---|---|
| Pull CDN (Origin Pull) | Edge server fetches assets from origin only when requested by a client for the first time. | Minimal storage waste; zero manual uploading required. | First visitor experiences a cache miss latency penalty. |
| Push CDN | Origin pushes and uploads new content directly to CDN edge servers beforehand. | Guaranteed cache hits for all users immediately upon release. | Storage overhead for unpopular or rarely downloaded assets. |
3. Performance Impact of CDNs
| Content Type | Without CDN (Cross-Continent Origin) | With Edge CDN Caching |
|---|---|---|
| Hero Image / Avatar (1MB) | ~800 ms – 1500 ms | ~30 ms – 60 ms |
| JS / CSS Bundles | ~400 ms | ~20 ms |
| Video Chunk (HLS 1080p) | Buffering & stutter | Seamless smooth playback |
| DDoS Attack Traffic | Origin server overwhelmed | Scrubbed & absorbed at edge PoPs |
4. CDN Cache Invalidation Strategies
When content changes at the origin, the CDN must invalidate stale cached copies:
- TTL Expiration (Time to Live): Static assets expire after fixed durations (e.g.,
Cache-Control: public, max-age=86400). - Purge / Hard Invalidation: Explicit API call to Cloudflare/CloudFront to immediately evict cached URLs.
- URL Versioning / Content Hashing (Best Practice): Append hash to file names (
bundle.a8f2c.js). Updating the app changes the URL, guaranteeing instant cache busts with infinite TTLs. - Stale-While-Revalidate: Serves slightly stale content immediately while fetching updated copies in the background.