Caching Strategies: Client, Server & Edge
Caching reduces latency and backend load but introduces consistency challenges. Choose the right layer — client memory, browser storage, server cache (Redis), or edge/CDN — based on data volatility, scope, and freshness requirements.
Memory cache is your quick personal notepad (fastest). LocalStorage is your desk drawer (persists across reloads). Redis is a shared office whiteboard (accessible by everyone). CDN is local warehouses around the world (fast global delivery). The best system uses the right notebook for each type of information.
1Client-Side Caching
Memory (React Query/Zustand) for session data, LocalStorage for preferences, IndexedDB for large/offline data, Service Worker for full offline support.
2Server-Side & Edge Caching
Redis for shared state and query results. CDN for static assets and global latency reduction.
3Invalidation Strategies
Time-based (TTL), event-based (pub/sub), version-based (cache busting), and stale-while-revalidate.
| Property | Memory Cache | CDN | Redis |
|---|---|---|---|
| Speed | Fastest | Global low latency | Sub-millisecond |
| Best For | API responses, UI state | Static assets, public content | Shared state, sessions, query results |
| Persistence | Session only | TTL-based | Configurable |
Memory Cache
Speed
Fastest
Best For
API responses, UI state
Persistence
Session only
CDN
Speed
Global low latency
Best For
Static assets, public content
Persistence
TTL-based
Redis
Speed
Sub-millisecond
Best For
Shared state, sessions, query results
Persistence
Configurable
Common questions
- ›“How do you decide where to cache data?”
- ›“What are the trade-offs between client-side and server-side caching?”
- ›“Explain cache invalidation strategies.”
- ›“How does CDN caching differ from application-level caching?”
What interviewers look for
- Clear separation of concerns by data type and volatility
- Understanding of freshness vs performance trade-offs
- Knowledge of invalidation patterns and their risks
- Holistic view across client, server, and edge layers
Short answer (60 sec)
Cache at multiple layers: memory for fastest access, CDN for static assets, Redis for shared state. Use appropriate invalidation (TTL, event-based, versioning) and always measure hit rates and consistency.
Detailed answer (senior level)
Client memory (React Query) is fastest for session data. Browser storage provides persistence. Redis excels at shared state with TTL and pub/sub. CDNs reduce global latency for static content. The real skill is defining freshness guarantees per data type and choosing the right invalidation strategy to balance speed and correctness.
- Caching everything with long TTLs
- Using LocalStorage for sensitive or large data
- No cache invalidation strategy after writes
- Ignoring cache stampede on cold starts
- Treating all data with the same caching policy
- ✓Cache at multiple layers for best results
- ✓Memory for speed, CDN for global reach, Redis for shared state
- ✓Define freshness guarantees before choosing TTLs
- ✓Plan invalidation strategy (time, event, versioning)
- ✓Monitor cache hit rates and consistency
- ✓Separate static assets from dynamic data
- ✓Caching is about consistency first, speed second
Related web fundamentals topics
Continue with closely related browser and frontend engineering concepts.