Make the right trade-off / CHAPTER 46
Client-side versus server-side caching
Place cached copies where they save the intended work without crossing identity or freshness boundaries.
Builds on Caching fundamentals, CDN delivery versus direct origin serving.
- Distinguish local, shared edge, and application caches.
- Explain cache directives and validators precisely.
- Prevent cross-user reuse and revocation mistakes.
01Where is the saved copy?
A browser loads a logo and a signed-in user's profile. Ask where a reusable copy is found:
- Client cache: a usable copy in the browser or mobile app can answer before any network request.
- Server-side cache: the browser still sends a request, but an application cache, reverse proxy or nearby delivery cache may answer without reading the origin database or file store.
- Several layers: each has its own key, allowed age and update path. Removing one copy does not automatically remove the others.
Also distinguish HTTP caching from custom application storage. A browser HTTP cache follows HTTP rules. Application code can separately write data into memory or offline storage. A service worker is browser code that can intercept requests and maintain another cache; HTTP directives do not automatically control every such custom copy.
List the actual stored copies, especially on logout or account switch. A server-side deletion cannot universally erase files already downloaded to a user-controlled device.
02Reuse, storage, and validation are separate
Choose three separate things: whether a response may be stored, when a stored response may be reused, and when it must be checked again.
| HTTP response rule | What a compliant cache does | What it does not do |
|---|---|---|
max-age=60 |
For a response it may store, it can reuse a copy whose HTTP age is below 60 seconds unless another directive requires validation. | It does not receive an automatic purge whenever the database changes. |
Unqualified no-cache |
It may store, but must validate before reuse. | The name does not prohibit storage. |
no-store |
It must not store this response. | It does not erase all earlier downloads or control every explicit app write. |
Unqualified private |
A shared cache must not store the response. | It does not encrypt local bytes or prohibit all browser caching. |
| ETag validator | It asks whether the saved response version is unchanged. | It still makes a network request. |
For ETag validation:
- The server returns a response with a tag identifying its version.
- When reuse requires validation, the browser sends that tag with its request. The server checks the caller’s permission before confirming any private response; a matching old tag cannot authorize a revoked user.
- If unchanged, the server confirms reuse without sending the full body again.
- If the caller still has access but the bytes changed, return the new body and tag. If access was revoked, deny the request instead of validating the old private copy.
These are ordinary unqualified directive meanings; combinations have additional rules. Apply privacy and retention policy to custom offline writes too. A no-store HTTP response does not repair code that deliberately saves the same invoice elsewhere.
03Worked example: public assets and account statements
Follow a shared device through repeat visits and account changes:
- The browser requests
logo-v3.svg. A shared delivery cache may fetch it once from the origin; the browser may then store its own permitted copy. - The next visit reuses a fresh browser copy. No network request occurs for that resource, so CDN logs do not count every local use.
- The shop changes the logo. Publish
logo-v4.svgand update page references. Purging version 3 on the server does not necessarily remove a fresh browser version 3. - Account
Aopens a profile. If custom storage uses only the keyprofile, switching toBcan displayA's record. Include account identity in the key or isolate/clear the storage on switch. - A private invoice is requested. Check permission and prevent shared reuse. If local persistence is inappropriate, use
no-storeand avoid custom offline saving as well.
Compare what each optimization saves. Validating an unchanged 50 KB profile can save roughly 50 KB of body transfer, but still takes a network and server validation trip. A fresh browser hit avoids that request; a server-side hit saves some origin work while retaining the client-to-cache trip.
Permission revocation can control future requests. It cannot guarantee erasure of every byte already saved on an external device. State that limit when promising private delivery.
Client-side versus server-side caching — decision flow
Follow the numbered arrows
- Browser cache → Shared delivery cachesend a request on miss or validation
- Shared delivery cache → Applicationforward a response not served from cache
- Application → Application cachelook up a permitted cached value
- Application → Original data storeread current saved data when required
Trace the diagram in words
- A fresh browser copy can answer without contacting the delivery server.
- A miss or validation sends a request through the configured caching and permission checks.
- Keep custom account data separate and apply the promised age limit at every permitted copy.
04Choose keys and freshness at each layer
Set policy at every actual copy:
- Public unchanging assets: versioned URLs make long reuse practical when pages discover new references after changes.
- Private account data: isolate identities and define account-switch/logout cleanup for custom stores.
- Server caches: include fields that change the response, such as language, size or identity where required.
- Freshness: coordinate allowed ages. A browser permitted an hour of reuse defeats a promise that a server purge alone makes profiles current within one minute.
- Offline use: decide intentionally which private data may persist and for how long; do not assume HTTP settings govern all code paths.
In the interview, mark which hit avoids a network request, which avoids an origin read and where permission is checked. Then switch accounts and revoke access. These traces expose errors that a repeated public-logo request will not.
DRAW. CALCULATE. EXPLAIN.
Trace a shared-device switch
20 minutes · guided practice
A browser caches a versioned logo, a 60-second profile and a sensitive invoice that this product must not save for offline use. Two people switch accounts on the same device. State policy at client, edge and custom offline stores; explain one update and one revocation limit.
Compare the worked solution
- Cache the public logo under a versioned URL and update references when its bytes change.
- Isolate each account's profile copies and ensure every permitted reuse lifetime fits the 60-second requirement.
- Authorize invoice reads, block shared reuse and use
no-storeand disable custom offline saving for the invoice, as this exercise requires. - On account switch, clear or separate custom account data so the next user cannot see the previous user's profile.
- A purge removes a controlled cache copy, not every browser file. Revocation blocks later controlled access; it cannot universally erase already downloaded bytes.
The checkboxes record your own assessment. The worked solution gives you a way to check the reasoning.
RETRIEVE BEFORE YOU REVEAL
Keep the important ideas.
Say the answer aloud, then turn the card over.
CARD 01What work does each cache placement save?
- A fresh client copy can avoid a network request.
- A server cache saves origin work after that request travels.
- Each layer still has its own age, key and identity rules.
CARD 02What do no-cache, no-store and private mean?
- No-cache requires validation before reuse but can allow storage.
- No-store prohibits compliant storage.
- Private prohibits shared-cache storage.
None erases downloads or automatically controls every custom offline copy.
CARD 03What changes on a shared-device account switch?
- Isolate profile keys and custom storage by account.
- Clear or separate old account data.
- Server purges do not automatically remove fresh browser copies or already downloaded files.
CHECK THE REASONING
Can you explain the choice?
Answer every question, then finish for an immediate score and an explanation for each answer. Aim for 80%, then revisit any gaps.
CLOSE THE LOOP
Explain it without the page.
Summarise the mechanism, one trade-off, and one failure mode. Then mark this chapter complete.