Client-Side vs Server-Side Caching
A saved copy can live at different points in the journey
Separate copies along one request path
A browser may reuse a downloaded image without asking the application again. The application may also reuse a product lookup from a server-side cache instead of reading the database. Both avoid work, but they avoid different steps.
Client-side caching keeps copies near or inside the client. Server-side caching keeps copies in server infrastructure, such as an application process, a shared cache or an edge service. Each layer has its own key, lifetime, owner and privacy rules.
What you’ll learn
- Follow browser hits, application-cache hits and database reads.
- Observe separate stale copies at different layers.
- Choose reuse rules for public assets and account-specific data.
Browser reuse avoids a network trip
HTTP response headers help a browser decide whether it may reuse a stored response or must validate it. A fresh reusable copy can satisfy a request without reaching the origin application.
Cache-Control: no-cache means reuse requires validation, not that storage is forbidden. no-store tells compliant caches not to store the response. A private cache and a shared cache have different reuse boundaries.
Service workers and application storage add other client caching mechanisms with explicit code and lifecycle concerns. Do not assume changing one HTTP header deletes every copy already stored by every mechanism.
Read through two independent caches
Which layer answered this read?
Both caches are empty. A first read fills both from the source.
Source reads: 0 · Server requests: 0
The model starts with source version 1 and empty browser and application caches. Read once to fill both copies. Publish version 2 at the source, then clear only the application cache and read again: the browser can still return version 1 without making a server request.
Clear the browser too and read again to fetch the newer source through the empty application cache. The model caches one public value indefinitely until explicit clearing. It omits HTTP validation, expiry and real security decisions so the distinct layers stay easy to see.
Server reuse saves shared backend work
An in-process cache belongs to one application instance. A shared cache can serve several instances, but introduces a network dependency and its own capacity and failure behaviour.
Use keys that include the differences that change the result. Private user data must not leak through a shared key. Invalidation, authorization and freshness must fit the actual response.
A browser can still contact the server when the application cache hits. Server caching can reduce database work without removing client-server latency or request handling. Inspect the complete path before deciding where a cache helps most.
Choose layers around the content
For public versioned stylesheets, browser and CDN reuse can be useful. For an account balance or permission change, choose strict freshness and isolation behaviour rather than copying a public-file policy.
The MDN HTTP caching guide explains private/shared caches, validation and directives. Source checked 6 October 2026. Inspect actual response headers and request traces; the lab is not a browser HTTP-cache implementation.
When a user reports stale data, identify which layer answered, its key and its policy. Clearing a server cache alone cannot remove a still-reusable browser copy. Plan logout, account changes and deployment updates across the relevant layers.
Check your design decision
Check your design decision
Connect cache placement and coordination
Placement decides where a copy lives. Cache-Aside decides who fills a miss; cache-write policies decide how an update reaches authority and copies. Keep those responsibilities distinct.
Locate the copy before changing its policy
Client and server caches skip different parts of the path. Every layer needs correct keys, privacy rules, lifetimes and update behaviour.
Trace which copy answered. Treat public assets and private changing data differently, and plan freshness across all relevant layers.
Reaching the recap and completing the quizzes are separate milestones.