Caching at the edge and in the browser

HTTP caching headers: letting the user's browser and a CDN answer before your servers do.

The fastest request is the one that never reaches your servers. Browsers and CDNs (servers placed near users) can both keep copies of responses, and you control them with HTTP headers. Caching here is powerful because it cuts both latency (no round trip to your region) and load (the origin never sees the request). It is also the hardest to undo, because you cannot reach into every user's browser and delete a copy.

HTTP/1.1 200 OK
Cache-Control: public, max-age=3600
ETag: "menu-v17"
Content-Type: application/json

A response that any cache may keep for one hour.

Cache-Control: max-age=3600 says the copy is fresh for 3,600 seconds: during that time the browser will not even ask. public allows shared caches like a CDN to store it; private restricts it to the user's own browser, which you want for personal data. no-store forbids storing at all (use it for sensitive pages). no-cache is confusingly named: it allows storing but requires revalidating with the server before each use.

Revalidation makes the second request cheap. The server sends an ETag (a version label). When the copy is no longer fresh, the browser asks If-None-Match: "menu-v17". If nothing changed the server replies 304 Not Modified with no body, saving bandwidth and work, and the browser reuses its copy.

A request may be answered by the browser, then the CDN, then your origin.

A strategy that works for most sites

Step 1 of 3

Static files with hashed names

Serve app.9f3c1.js with max-age=31536000, immutable (one year). When the file changes, its name changes, so there is no stale copy to worry about.

Question 1

What does Cache-Control: no-cache actually mean?

Question 2

Why can a hashed filename such as app.9f3c1.js safely be cached for a year?

Your turn

Write the Cache-Control header you would use for: (a) the logo image, (b) a user's order history API response, (c) the restaurant list for a city.

Stuck? Decide who may store each response and for how long.

What to remember

Browsers and CDNs can answer requests before they reach your servers, controlled by HTTP headers.
max-age sets freshness; ETag with 304 lets a cache revalidate cheaply; private and no-store protect personal data.
Use versioned filenames with long lifetimes for static files.
You cannot recall copies from users' browsers, so be careful with long lifetimes on mutable URLs.