Hamropedia

Phase 1 · Networking and APIs · Topic 1.4

CDN (content delivery network)

Must know

A network of servers around the world that caches static content (images, video, scripts) close to users.

By Manoj Kumar Thapa

AI Software Engineer ·

Not started

Step 1 Understand it

The problem it solves. Distance costs time: a user in Sydney fetching from London waits around a quarter of a second for each round trip, and every byte you send costs . Big files and users all over the world make this much worse.

New words in this topic (tap one to see what it means)

Watch it happen

AnimationA CDN serves copies from somewhere near the user
Read the animation as text
  1. cdn.example.com points at the CDN. A user's request goes to the nearest edge server, found through DNS or anycast routing.
  2. Cache miss: the edge doesn't have the file yet, so it fetches it from your origin — once — across the world.
  3. It stores a copy and returns it. This first request was slow, but it paid for everyone after it.
  4. Cache hit: the next user in Tokyo gets the file from the edge in a few milliseconds. Your servers never see the request.
  5. The copy stays until its TTL runs out. Less latency for users, less load on you, and spikes are absorbed at the edge.

Picture it

flowchart LR
  U1["User in Sydney"] --> E1["Edge server<br/>Sydney"]
  U2["User in London"] --> E2["Edge server<br/>London"]
  E1 -.->|"miss: fetch once"| O["Origin server<br/>(yours)"]
  E2 -.->|"miss: fetch once"| O
Users talk to near them. Only on a miss does the edge fetch the file from your ; after that, everyone nearby gets the fast local copy.

The idea

Instead of every user fetching a video from your one , copies are served from a nearby 'edge' server. This cuts , takes load off your servers and absorbs traffic spikes. Content is pulled into the on the first (pull CDN) or uploaded in advance (push CDN).

How it works, step by step

  1. You point a hostname, like cdn.example.com, at the CDN provider.
  2. A user's request goes to the nearest edge server (found through or 'anycast' routing).
  3. : the edge already has the file and returns it in a few milliseconds.
  4. Cache miss: the edge fetches the file from your origin server once, stores it, and returns it. Every later user in that gets the fast copy.
  5. The file stays until its expires. To update it straight away, publish a new file name (app.3f9a.js → app.7c2b.js) or purge the old one.

Analogy

Local supermarket branches stocking popular products, so you don't have to drive to the central warehouse.

Where the analogy breaks

A supermarket can check the warehouse for the newest stock. A CDN serves its copy until it expires, so after you change a file, users may get the old one unless you put a version in the file name or purge the cache.

Example

Netflix places its own CDN boxes inside internet providers' networks, so most video traffic never crosses the wider internet.

Must-know points

  • Best for static, popular, cacheable content: images, video , JavaScript and CSS files.
  • Pull CDN: fetches from your origin server on a cache miss. Push CDN: you upload content ahead of time.
  • Control freshness with TTL headers; put a version or in file names (app.3f9a.js) so updates appear immediately.
  • Also helps with protection, and can handle close to the user.

Common mistakes

  • Caching personalised pages at the edge, and showing one user's data to another.
  • Long TTLs on files that change, without names.
  • Forgetting that the first request in each region is still slow (a 'cold' cache).

Step 2 Go further (free, optional)

Optional. The notes above are written to be enough on their own. These free resources give a second explanation and extra practice.

Step 3 Practise

Try each exercise yourself first: on paper, out loud or in code. Then open the answer and compare it with yours.

  1. ExplainSay it in plain words in under a minute, with no notes.

    Explain a CDN with the supermarket picture, and where the picture breaks.

    Show answer

    A CDN is like a supermarket chain. Instead of everyone driving to the central warehouse (your origin server), each town has a branch (an edge server) that stocks the popular products (files). You shop at your local branch: much quicker. When the branch runs out of something, it orders it once from the warehouse (a cache miss) and then has it for everyone in town.

    Where the picture breaks: a supermarket can check the warehouse for the newest version. A CDN keeps selling its copy until it expires (its TTL), even if you have changed the file at the warehouse. So after an update, users may get the old file unless the new one has a new name (app.3f9a.js) or you purge the cache. Also, a supermarket only stocks things everyone buys: anything personal to one user (their account page) should not be stored at the edge.

  2. DrawSketch the diagram (or class diagram) from memory.

    Draw a user, a CDN edge server and your origin, showing a cache hit and a cache miss.

    Show answer

    On a hit the user never touches your servers. On a miss the edge fetches the file once from the origin, keeps a copy until its TTL runs out, and every later nearby user gets a hit.

    text
    Cache hit
  User (Sydney) ──► Edge (Sydney)
                     has the file
  User ◄──────────── reply, ~10 ms

Cache miss
  User (Sydney) ──► Edge (Sydney)
                     not there yet
                       │ fetch once
                       ▼
                    Origin (London)
                       │ file
                       ▼
                    Edge stores a copy
                    (until the TTL ends)
  User ◄──────────── reply, ~300 ms

  Next user in Sydney: a hit.

  3. ApplyUse it in a real design question and say exactly where it fits.

    In a YouTube-like design, which data goes through the CDN and which does not?

    Show answer

    Through the CDN (public, large, read by many people, the same for everyone):
    • Video segments: each video is cut into of a few seconds, at several qualities (240p to 4K). This is almost all of the bandwidth.
    • Thumbnails, channel pictures and banners.
    • The website's static files: JavaScript, CSS, fonts, icons.

    Not through the CDN (personal, changing, or writes), straight to your servers:
    • Uploads: they go to , often through a signed upload URL, then to the pipeline.
    • The home feed and recommendations, which are different for every user.
    • Watch history, likes, comments, subscriptions: writes, and data about one user.
    • Search, sign-in and payments.
    • View counts and analytics .

    A middle case: rarely watched "long-tail" videos may be served from the origin or a regional cache, because caching them at every edge wastes space.

  4. Trade-offsSay what it costs, when not to use it, and the alternative.

    You fixed a bug in app.js but users still get the old file. Why, and how do you prevent it next time?

    Show answer

    Why: app.js has the same name as before, and copies are cached with a long TTL in two places: the CDN's edge servers and users' browsers. Neither knows the file has changed, so both keep serving the old one until their copy expires.

    Right now: purge app.js from the CDN. That fixes the edge, but browsers that already have it may still use their copy until it expires.

    Next time: put a fingerprint of the contents in the file name (app.3f9a.js, made by the build tool). A changed file gets a new name, so no cache has ever seen it, and you can give these files a very long TTL ("immutable"). The HTML page that names the file is cached briefly (or revalidated every time), so it picks up the new name within seconds.

Step 4 Interview-ready, then prove it

Your interview answer

About 20 to 40 seconds, said out loud. Practise it until it sounds like you, not like notes.

I'd serve static assets and media through a CDN, so users download them from a nearby edge server. That lowers latency and takes most of the bandwidth off our origin. I'd use versioned file names so updates show up immediately.

Follow-up questions

Can a CDN cache API ?

Sometimes, for short TTLs on public data like a product page. Personalised responses usually can't be cached at the edge.

Pull or push?

Pull for most sites (simple and automatic). Push when content is large and known in advance, like a video library.

Tick each check when you can do it without notes

A topic is finished when you pass all four checks, not when you finish a video. Be strict: if you needed your notes, it is not ticked yet.

  • Explain Say it in plain words in under a minute, with no notes.
  • Draw Sketch the diagram (or class diagram) from memory.
  • Apply Use it in a real design question and say exactly where it fits.
  • Trade-offs Say what it costs, when not to use it, and the alternative.

0 of 4 checks ticked.

Saved in this browser. Back it up or move it to another device.