Sign in
Skip to solution
mediumSystem Design

What is a CDN and how does it work?

454 views
01

Understand the problem

Explain content delivery networks.

cdn
02

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Nudge consolestandby

Stuck? Beam a request up — the console returns a conceptual nudge that guides your logic without spoiling the implementation.

03

Study the solution

What Is a CDN, and How Does It Work?

Target Audience: Junior & Senior Software Engineers preparing for System Design Interviews — no prior system design knowledge assumed. Difficulty: Easy to Medium

How to read this doc: Every concept is explained in plain language first. Right after, you'll see a cal

Solution ready — 2 min read

Classified // press E to declassify

04

Read the code

Cache-Control headers (origin response)
Run Playground
// Static, versioned asset (filename has a content hash) -> cache forever:
Cache-Control: public, max-age=31536000, immutable

// HTML that may change -> let the CDN serve stale briefly while refreshing:
Cache-Control: public, max-age=0, s-maxage=60, stale-while-revalidate=300

// Per-user / private data -> never cache at the shared edge:
Cache-Control: private, no-store
Edge cache hit/miss simulation with TTL
Run Playground
class EdgeCache {
  constructor(ttl) {
    this.ttl = ttl;
    this.cache = new Map(); // contentId -> expiry time
    this.edgeLatency = 10;
    this.originLatency = 200;
  }

  request(contentId, now) {
    const expiry = this.cache.get(contentId);
    if (expiry !== undefined && expiry > now) {
      return ['HIT', this.edgeLatency];
    }
    this.cache.set(contentId, now + this.ttl);
    return ['MISS', this.originLatency];
  }
}

const edge = new EdgeCache(100);
const requests = [[0, 'a'], [5, 'a'], [50, 'b'], [60, 'a'], [150, 'a'], [160, 'b']];

const results = [];
let totalLatency = 0;
let hits = 0;
for (const [now, contentId] of requests) {
  const [outcome, latency] = edge.request(contentId, now);
  results.push(outcome);
  totalLatency += latency;
  if (outcome === 'HIT') hits += 1;
}

console.log('Outcomes:', results);
console.log('Total latency:', totalLatency);
console.log('Hit rate:', (100 * hits / requests.length).toFixed(1), '%');
05

Join the discussion

Discussion (0)

Sign in to join the discussion.

No responses yet. Be the first to share what you think.

Transmission complete // awaiting log

KEEP THE
STREAK ALIVE.

Dossier 30 of 99 decoded in the System Design track. One more won't hurt.

Back to track