Stop 11 · CachingTopics · 4/8

CDN Caching

In short

Your server sits in Mumbai, but users open your site from Guwahati, Dubai and Toronto. A CDN keeps copies of your files on servers near each of them, so pages load fast everywhere.

Caching static or semi-static responses at edge servers geographically close to users, so requests never have to reach your origin server at all.

The blob character hands sweet boxes over a local shop counter as a van brings stock from a far kitchen.

Think of it like this

Neighbourhood sweet shop branches

A famous mithai brand doesn't make every customer travel to its main kitchen. Branches in each area keep fresh boxes, restocked from the kitchen when they run out. A CDN does this with your files: edge servers near users keep copies and refill from your origin.

Watch it happen

First visitor misses, second one hits

User in Delhi

Edge (Delhi)

Origin

GET /logo.png

1/6A user in Delhi asks for your logo and is routed to the nearest edge server.

The big ideas

What you need to know

Edges near users

CDNs run servers in many cities. Users connect to a nearby one, cutting the distance data travels.

Your headers decide

The Cache-Control header from your origin tells the CDN what it may cache and for how long.

Fingerprint static files

Name files like app.3f9a1c.js. When content changes the name changes, so they can be cached for a year.

Purge when needed

CDNs let you purge a URL on demand, for when something must update before its TTL ends.

See it in code

Walk through the code

http

1# Fingerprinted JS/CSS: safe to cache for a year2Cache-Control: public, max-age=31536000, immutable3 4# HTML pages: CDN keeps 60s, browsers always revalidate5Cache-Control: public, max-age=0, s-maxage=60, stale-while-revalidate=3006 7# Logged-in API responses: never cache on shared servers8Cache-Control: private, no-store

1/3The file name changes with its content, so a year-long cache is safe. immutable skips revalidation.

stale-while-revalidate lets a cache serve a slightly old copy while it fetches a fresh one in the background.

Save yourself the pain

Common mistakes

Oops

Letting a CDN cache pages that contain one user's personal data.

Do this instead

The next visitor could see someone else's account page. Mark personal responses private or no-store.

Oops

Caching style.css for a year without ever changing its file name.

Do this instead

Users stay stuck on old CSS. Use content hashes in file names, which most bundlers add for you.

Your mission

Watch a CDN hit

~20 min

Quick check

Which header lets a CDN cache a page for 60 seconds while browsers revalidate every time?

Go deeper

1Check the `Cache-Control` headers your API sends for cacheable responses.
2Learn how a CDN decides whether to cache a response based on headers.
3Understand which endpoints are safe to CDN-cache (public, non-personalized data) and which aren't.