awesome-everything RU
↑ Back to the climb

Caching

SWR: header and config reading

Crux Read real Cache-Control headers, edge logs, and SWR client config, then predict the freshness behaviour and the highest-leverage fix.
Your altitude — climbing toward senior
ZeroJuniorMiddleSenior
You are at senior altitude — in orbit
◷ 14 min

SWR is configured in a header and a few lines of client config, and diagnosed in an edge log. Read each one, trace what the cache actually does, and pick the fix a senior would make first.

Goal

Practise the loop you run on every freshness incident: read the directive or the config, predict the timeline of a request, and reach for the change that fixes the behaviour rather than the symptom.

Snippet 1 — the header timeline

Cache-Control: max-age=60, stale-while-revalidate=300, stale-if-error=86400
t=0s    cached fresh
t=45s   request  -> fresh hit, no origin call
t=150s  request  -> ???
t=600s  request, origin returns 503 -> ???
Quiz

Reading the header against the timeline, which line is correct?

Snippet 2 — the edge revalidation log

key=/catalog  HIT-STALE   revalidate=spawned   origin_inflight=1
key=/catalog  HIT-STALE   revalidate=spawned   origin_inflight=2
key=/catalog  HIT-STALE   revalidate=spawned   origin_inflight=874
...
origin  p99 1.9s -> 41s   5xx_rate 0% -> 12%
Quiz

The log shows origin_inflight climbing into the hundreds for a single key. What is happening, and the fix?

Snippet 3 — the SWR client config

const { data } = useSWR('/api/quote', fetcher, {
  dedupingInterval: 2000,
  revalidateOnFocus: true,
  revalidateOnReconnect: true,
})
Quiz

A user leaves this tab open for an hour, then clicks back into it. What does the SWR client do, and what would two concurrent mounts of this hook in the same tick do?

Snippet 4 — caching an auth check

GET /api/permissions/user-42
Cache-Control: max-age=60, stale-while-revalidate=600
Quiz

This header is applied to a per-user permissions endpoint. What is the defect?

Recap

Every freshness incident is read in a header, a log, or a config. A layered header is three nested windows — fresh, stale-while-revalidate, stale-if-error — and you trace a request by which window its timestamp lands in. An edge log with climbing origin_inflight on one key is the background-refresh herd, fixed by single-flight plus jitter, not a restart. Client config reproduces the model: focus/reconnect revalidation is stale-first, and dedupingInterval coalesces concurrent calls. And no header, anywhere, makes SWR safe on an authorization decision.

Continue the climb ↑SWR: flatten the revalidation sawtooth
shortcuts expand
search
K
prev piece
k
next piece
j
cycle tier
t
this menu
?
sources3
expand
  1. 01
  2. 02
  3. 03

Trademarks belong to their respective owners. Editorial reference only.