CDN and Content Delivery

Build the mental model

A CDN is a network of servers at many physical locations, each holding a cached copy of content that would otherwise be fetched from one origin server every time.

Without one, a distant user waits for every request to physically cross the network to the origin and back. With a CDN, content gets cached near that user after the first request, and every nearby visitor after that gets it locally.

A cache hit returns content already sitting at the nearby location instantly. A cache miss means it isn't there yet, so the CDN fetches from origin first, caches a copy, then returns it — slower than a hit.

CDNs are especially effective for static assets — images, stylesheets, scripts, video — since that content rarely changes. Content that differs per user, like a personalized dashboard, benefits far less.

CDN: A network of servers at many locations that cache and serve content close to users, reducing latency and origin load.

Origin: The original server that holds the authoritative copy of content; a CDN falls back to it whenever a cache miss occurs.

Cache Hit: A request answered directly from a nearby cached copy, with no need to contact the origin server.

Cache Miss: A request for content not yet cached nearby, requiring a fetch from the origin before it can be returned and cached for next time.

text

ORIGIN TO CDN EDGE LOCATIONS TO NEARBY USER
-------------------------------------------
                  +--------------------+
                  |   Origin Server    |
                  +--------------------+
                    |        |        |
                  Tokyo  Frankfurt Singapore
                  Edge     Edge      Edge
                    |                  |
                 User A             User B
             (cached, fast)      (cached, fast)

Connect it to a real scenario

Most modern hosting platforms for static sites and frontend apps put a CDN in front of your content automatically — deploying to one already gives you this benefit with no extra configuration.

Images, fonts, and compiled JS/CSS bundles are strong caching candidates since they're identical for every visitor. A response with one user's private data is a poor candidate — serving it to a different user would be a real bug.

The exact rules for cache duration and invalidation involve cache-control headers and HTTP mechanics — the Networking tutorial covers load balancing and proxies in the depth needed for that.

A CDN caches content at many locations close to users, cutting latency and origin load.
A cache hit skips the origin entirely; a cache miss falls through to it and caches the result for next time.
CDNs help most for shared static assets, and help far less for private or per-user content.

Try the working example

javascript

const cache = {};

function originFetch(path) {
  console.log(`  (origin fetch for ${path})`);
  return `content of ${path}`;
}

function getFromCdn(path) {
  if (cache[path]) {
    return { result: cache[path], status: "HIT" };
  }
  const fresh = originFetch(path);
  cache[path] = fresh;
  return { result: fresh, status: "MISS" };
}

console.log(getFromCdn("/logo.png"));
console.log(getFromCdn("/logo.png"));
console.log(getFromCdn("/style.css"));

You should see

  (origin fetch for /logo.png)
{ result: 'content of /logo.png', status: 'MISS' }
{ result: 'content of /logo.png', status: 'HIT' }
  (origin fetch for /style.css)
{ result: 'content of /style.css', status: 'MISS' }

5-minute try-it

Add a third distinct path to the lookup sequence, request it twice in a row, and predict which call will print '(origin fetch...)' before running the code to confirm.

One important caution

Caching a personalized or private response as if it were shared content, leaking one user's data to another.

Forgetting that a cache miss still exists behind every CDN — the origin server must stay reachable and capable of handling that traffic.

CDN — MDN Web Docs Glossary — Cloud & Deployment