Client Caching & Data Layer
Stale-while-revalidate, invalidation and optimistic updates on the client.
6 to work through
-
beginner
A user renames their account. The settings page shows the new name at once. The dashboard still shows the old name after a full page navigation and corrects itself only after a hard reload or about 15 minutes. Two different caches are involved. Which is which and which one can application code not invalidate?
2 min answer -
intermediate
A single-page application shows stale data after a user makes a change elsewhere in the product. How should client-side caching and invalidation be designed?
2 min answer -
intermediate
Users complete an action and the interface still shows the previous value until they refresh. Diagnose.
2 min answer -
advanced
A live scoreboard JSON endpoint is cached at the CDN with a 5-second TTL and polled every 5 seconds by each viewer. Peak concurrency for an Indian cricket final is in the range Hotstar publicly reported for the 2019 World Cup semi-final - 25.3 million concurrent viewers. Product wants the payload to include the viewer's own fantasy-team score. Roughly what request rate reaches the origin before and after that change?
3 min answer -
advanced
A quick-commerce app must feel instant while showing inventory that changes constantly. What caching strategy on the client?
2 min answer -
advanced
An image discovery application does heavy infinite scrolling with per-user recommendations. What should the client data layer provide?
1 min answer
4 terms in this topic
Client-Side Data Layer
A client library that owns fetching, caching, invalidation and background refresh of server data, distinct from local UI state.
conceptCommitment Read
The rule that the read immediately preceding an irreversible action must come from the authoritative source, which is what allows everything else in …
patternNormalised Client Cache
Caching server responses as entities keyed by identity rather than as whole responses keyed by request, so that updating an entity once updates every…
patternStale While Revalidate
Serving cached data immediately while fetching a fresh copy in the background, which makes an interface feel instant at the cost of a brief inconsistency.
Neighbouring topics
Frontend & Experience Architecture
General material on architecting the surface the user actually touches.
Rendering Strategies
Client, server, static and incremental rendering, and what each costs on first paint.
Edge Rendering
Running the render close to the user, and the personalisation and cache trade it implies.
Hydration Cost
The gap between visible and interactive, and the JavaScript that closes it.
Micro-Frontends
Independent deployment of UI slices, and the shared runtime that undermines it.
Module Federation
Loading code from another build at runtime, with versioning and failure to think about.
UI Monorepo Strategy
One repository for many front ends, and the build graph that makes it viable.
Design Systems
Components as a versioned internal product, with adoption and deprecation like any API.
Component Contracts
Props, slots and events as an interface, and the breaking change hidden in a style.
Client State Architecture
Server state, UI state and derived state, and why conflating them causes most bugs.
BFF for Experience
One backend per experience, shaped by the screen rather than by the domain.
API Shapes for UI
REST, GraphQL and RPC judged by over-fetching, round trips and client coupling.
Web Performance Budgets
A number a build can fail against, rather than a performance sprint once a year.
Core Web Vitals
LCP, INP and CLS — what they measure, and the architecture that moves them.
Accessibility Architecture
Semantics, focus management and announcements designed in rather than audited in.
Internationalisation
Locale, direction, pluralisation and dates as structural concerns, not string tables.
Client Feature Flags
Flag evaluation on a device you do not control, and the flicker and staleness it brings.
Real User Monitoring
Field data from real devices and networks, against the synthetic run that looked fine.
Frontend Security
CSP, XSS, CSRF, token storage, and the trust boundary that ends at the browser.