Client-Side vs Server-Side Caching

A saved copy can live at different points in the journey

Separate copies along one request path

Browser cacheA reusable hit avoids the server request
Application cacheA hit avoids reading the source
Authoritative sourceThe current stored value
Browser reuse can avoid the application call. An application cache hit can avoid a database read. Clearing one layer does not clear every other layer.

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?

Source version1
Application cacheEmpty
Browser cacheEmpty

Both caches are empty. A first read fills both from the source.

Source reads: 0 · Server requests: 0

Source, application-cache and browser-cache versions stay visible. Read, publish and clear individual copies while tracking source reads.

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

The browser has a reusable version 1. The application cache was cleared. Must the next read reach the application in the lab?
Choose one answer. You can try again.

Answer and explanation

No. The browser can answer from its own copy.

The layers are independent; clearing one does not clear another.

Check your design decision

What does the HTTP directive no-cache mean for a stored response?
Choose one answer. You can try again.

Answer and explanation

It must be validated before reuse.

no-cache is not the same directive as no-store.

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.

    Next lesson: Cache Invalidation Strategies →