Art of Codeartofcode
Lesson 8 of 15

13. Caching at Scale

1
The picture to keep in your head
2
13.1 What is a cache stampede, and how do you stop one?
3
13.2 What is cache penetration?
4
13.3 What is a cache avalanche?
5
13.4 What is a hot key, and why can't sharding fix it?
6
13.5 How do you spread a cache across many machines?
7
13.6 What is cache warming?
8
13.7 How does HTTP caching work in browsers and CDNs?
9
13.8 How do you know your cache is healthy?
10
Memory card and where the analogy breaks
11
Practice: five levels
12
Interview questions
13
Solutions
14
Sources
15
Code lab
13. Caching at Scale

13.7 How does HTTP caching work in browsers and CDNs?

3 min read+10 XP

At the wedding: Guests who've been served keep a plate at their own table. Within the hour, they eat from their plate without asking. After that, they ask a waiter, "is this still the latest?", and the waiter just says "yes, carry on" instead of bringing a whole new plate.

In the system: The cheapest request is one that never reaches you. HTTP lets your server tell browsers and CDNs (Chapter 26) how long they may keep a response, with headers defined in the HTTP caching standard (RFC 9111).

browser gets a response with max-age and an ETag; reuses it; later revalidates and gets 304 Not Modified.

Figure: a fresh copy needs no request; a stale copy needs only a tiny check.

Freshness: how long a copy may be reused without asking

Cache-Control: public, max-age=3600 anyone may keep it for 1 hour Cache-Control: private, max-age=60 only the user's browser, 1 minute Cache-Control: s-maxage=600 CDNs use 10 minutes instead Cache-Control: no-store never store it (bank details) Cache-Control: no-cache store it, but ask before each reuse Cache-Control: max-age=31536000, immutable versioned files that never change

Revalidation: "is my copy still good?"

  • The server sends an ETag (a fingerprint of the content) or a Last-Modified date.
  • When the copy is stale, the client asks again with If-None-Match: "a1f" (or If-Modified-Since).
  • If nothing changed, the server replies 304 Not Modified with no body: the client keeps its copy. Only changed content is sent again.

Handy extras:

  • stale-while-revalidate=30: serve the stale copy for up to 30 seconds while fetching a fresh one in the background (RFC 5861). The HTTP version of 13.1's "serve stale while refreshing".
  • Vary: Accept-Encoding (and similar): tells caches that the response differs by that request header, so they keep separate copies.

Rules for the grocery app: product images and scripts get versioned file names with long max-age and immutable; product pages get a short s-maxage at the CDN plus purges on price changes (Chapter 26); carts and account pages get private or no-store.

Memory code: "Fresh: don't ask. Stale: ask 'still good?'"