Why a CDN mattersCore idea
Latency
Serving a video from Mumbai instead of a US origin cuts the round trip from over 200ms to tens of milliseconds.
Offload
The origin never sees requests for popular cached content, so you need far fewer backend servers.
Resilience
The edge absorbs traffic spikes and DDoS attacks before they reach you.
Cost
Bytes served from the CDN cache are much cheaper than bandwidth from your origin.
High-level architectureDesign
%%{init: {"look":"handDrawn","handDrawnSeed":7,"theme":"base","fontFamily":"Virgil, \"Segoe Print\", \"Comic Sans MS\", cursive","themeVariables":{"fontFamily":"Virgil, \"Segoe Print\", \"Comic Sans MS\", cursive","fontSize":"16px","primaryColor":"#fff4e6","primaryBorderColor":"#1e1e1e","primaryTextColor":"#1e1e1e","secondaryColor":"#e7f5ff","tertiaryColor":"#ebfbee","lineColor":"#1e1e1e","textColor":"#1e1e1e","mainBkg":"#fff4e6","nodeBorder":"#1e1e1e","clusterBkg":"#f8f9fa","edgeLabelBackground":"#ffffff","actorBkg":"#e7f5ff","actorBorder":"#1e1e1e","noteBkgColor":"#fff9db","noteBorderColor":"#1e1e1e"}}}%%
graph LR
U1["User (Mumbai)"] --> E1["Edge (BOM)"]
U2["User (London)"] --> E2["Edge (LHR)"]
E1 -->|"miss"| O["Origin"]
E2 -->|"miss"| O
O --> S[("Object store / DB")]
class U1,U2 blue
class E1,E2 green
class O orange
class S violet
classDef orange fill:#ffd8a8,stroke:#1e1e1e,color:#1e1e1e
classDef blue fill:#a5d8ff,stroke:#1e1e1e,color:#1e1e1e
classDef green fill:#b2f2bb,stroke:#1e1e1e,color:#1e1e1e
classDef red fill:#ffc9c9,stroke:#1e1e1e,color:#1e1e1e
classDef violet fill:#d0bfff,stroke:#1e1e1e,color:#1e1e1e
classDef yellow fill:#ffec99,stroke:#1e1e1e,color:#1e1e1e
classDef grey fill:#e9ecef,stroke:#1e1e1e,color:#1e1e1ePull CDN vs push CDNCompare
Pull (on demand)like cache-aside
The edge fetches from the origin on the first miss. Automatic, nothing to upload, good for images and HTML that change. But the first request in each region is slower, and the origin has to handle the misses.
Push (proactive)like write-through
You upload files to the edges ahead of time. No cold misses, ideal for large files you know about in advance, like video courses or app releases. But you must know the content upfront and pay to store it everywhere.
TTL and cache invalidationHow it works
Three ways to keep the CDN fresh, from most to least reliable:
Content-hashed URLs
A file like app.3f2a9.css gets a new URL whenever its content changes, so the cache can never be stale. This is the industry default for deployed assets.
TTL (max-age / s-maxage)
Let content that changes expire quickly and immutable files live long. Tune it per type of asset.
API purge
Explicitly evict a URL or path. Powerful, but every purge is a network call and it can race with requests already in flight.
app.3f2a9.css Cache-Control: public, max-age=31536000, immutable
index.html Cache-Control: public, max-age=60
/api/me Cache-Control: private, no-storeWhat belongs on the CDNWhen to use
| Content | |
|---|---|
| ✓ Yes | Images, video thumbnails, JS/CSS bundles, fonts, static HTML, audio |
| ~ Sometimes | HTML with a per-user sidebar (use edge-side includes or a short TTL) |
| ✗ No | Account balances, session state, live user-specific API responses |
The dynamic parts the CDN can't cache belong in a Redis layer instead. See caching strategies.
Video streaming with a CDNExample
Streaming is where CDNs shine. Split each video into short segments, store them in object storage, and let the CDN serve the hottest segments from the edge. Several bitrate versions let the player switch quality as the network changes. This is the approach behind the Netflix streaming case study.
%%{init: {"look":"handDrawn","handDrawnSeed":7,"theme":"base","fontFamily":"Virgil, \"Segoe Print\", \"Comic Sans MS\", cursive","themeVariables":{"fontFamily":"Virgil, \"Segoe Print\", \"Comic Sans MS\", cursive","fontSize":"16px","primaryColor":"#fff4e6","primaryBorderColor":"#1e1e1e","primaryTextColor":"#1e1e1e","secondaryColor":"#e7f5ff","tertiaryColor":"#ebfbee","lineColor":"#1e1e1e","textColor":"#1e1e1e","mainBkg":"#fff4e6","nodeBorder":"#1e1e1e","clusterBkg":"#f8f9fa","edgeLabelBackground":"#ffffff","actorBkg":"#e7f5ff","actorBorder":"#1e1e1e","noteBkgColor":"#fff9db","noteBorderColor":"#1e1e1e"}}}%%
graph LR
V["Uploaded video"] --> T["Transcoder<br/>1080p · 720p · 480p"]
T --> S[("Object storage<br/>2–6 s segments")]
S --> C["CDN edges"]
C --> P["Player<br/>switches bitrate"]
class V blue
class T yellow
class S violet
class C green
class P orange
classDef orange fill:#ffd8a8,stroke:#1e1e1e,color:#1e1e1e
classDef blue fill:#a5d8ff,stroke:#1e1e1e,color:#1e1e1e
classDef green fill:#b2f2bb,stroke:#1e1e1e,color:#1e1e1e
classDef red fill:#ffc9c9,stroke:#1e1e1e,color:#1e1e1e
classDef violet fill:#d0bfff,stroke:#1e1e1e,color:#1e1e1e
classDef yellow fill:#ffec99,stroke:#1e1e1e,color:#1e1e1e
classDef grey fill:#e9ecef,stroke:#1e1e1e,color:#1e1e1eCommon interview mistakesPitfalls
Summary: the key decisionsSummary
Answering in that order covers the whole question.
Frequently asked questionsFAQ
Is a CDN only for static content?
Mostly, but edge computing widened that considerably. Edge functions can personalize cached HTML, and edge-side includes can inject per-user fragments into an otherwise cached page. In a classic interview answer, keep static assets on the CDN and serve dynamic data from Redis plus the origin.
How does DNS find the nearest CDN edge?
User requests for the CDN hostname go to the CDN's authoritative DNS, which answers with the edge IP of the closest PoP based on the resolver location and health. That is why CDNs advertise DNS resolution as part of their control plane.
Does a CDN help system design at small scale?
Yes, up to a point. Even a single-region application benefits once its users are spread across geographies. The architectural habit matters more than raw traffic, and interviewers reward you for adding a CDN where it fits the access pattern rather than only at millions of users.
Now explain cdn to me out loud
I'll give you a design problem and push on the trade-offs, like a real interviewer.