Back
Web Fundamentals

Caching Strategies: Client, Server & Edge

Web Fundamentals
Build & Deployment: Monorepo, CI/CD, Strategies & Release SafetyState Management: Choosing the Right SolutionRedux: Predictable State Container (RTK + RTK Query)React Query (TanStack Query): Server State CachingData Fetching Patterns: REST, GraphQL, tRPC & Real-timeGraphQL Fundamentals for Frontend: Shape, Caching, and TradeoffsgRPC-Web Fundamentals: Browser Constraints and Proxy ModelCaching Strategies: Client, Server & EdgeData Normalization: Organizing State for PerformanceAPI Design Best Practices: Pagination, Errors, Versioning & Type SafetyAPI Versioning Strategies for Frontend CompatibilityPagination: Offset vs Cursor-BasedRate Limiting & API Resilience: Retries, Backoff, Jitter, IdempotencyHow Frontend Developers Can Handle Millions of API Requests Without Crashing EverythingBrowser Storage: Cookies, SessionStorage, LocalStorage, IndexedDBReal-time Communication: WebSockets, SSE & PollingWebRTC: Real-Time Communication in the BrowserCore Web Vitals: LCP, INP & CLSPerformance Optimization Trade-offsCritical Resource Prioritization: Optimize Loading OrderCode Splitting: Optimize Bundle Size with Dynamic ImportsTree Shaking: Eliminate Dead Code from Your BundleLazy Loading: Load Resources On-DemandResource Hints: Preload, Prefetch & PreconnectText Compression: Gzip and BrotliImage & Video Optimization: Modern Formats & TechniquesAdaptive Loading: Optimize for Device & NetworkList Virtualization: Render Large Lists EfficientlyWeb Workers vs Main Thread: Offloading Heavy WorkMemory Leaks in Frontend Apps: Detection & PreventionManaging Third-Party Scripts: Optimization StrategiesHow CDNs Work: Edge Delivery, Caching & PerformanceHTTP Caching Deep Dive: Cache-Control, ETag & RevalidationService Workers & Offline Strategy: Cache First, Network First & Update LifecyclePWA Fundamentals: Manifest, Installability & Offline UXCritical Rendering PathScript Loading: async vs deferEvent Loop: Understanding JavaScript Execution ModelJavaScript Module Systems: CJS vs ESM vs UMDDynamic Module Loading: import() FunctionImport on Interaction: Load When User InteractsImport on Visibility: Lazy Loading with IntersectionObserverBrowser Rendering Pipeline & Layout ThrashingRendering Strategies: CSR vs SSR vs SSG vs ISRStreaming SSR: Progressive HTML StreamingIslands Architecture: Independent Component HydrationReact Server Components: Zero-JS Server RenderingFramework Reactivity: React, Vue, Svelte & SolidHTTP/1.1 vs HTTP/2 vs HTTP/3 (QUIC) for Frontend PerformanceDNS Resolution: Path, TTL, Caching & Frontend ImpactCross-Site Scripting (XSS) AttacksCross-Site Request Forgery (CSRF) AttacksCORS Explained: Cross-Origin Resource SharingCORS Preflight in Practice: Credentials, Simple Requests & MisconfigurationsContent Security Policy (CSP)Why is HTTPS Secure? Understanding TLS/SSLAuthorization Best PracticesCookie Security & Session Hardening: SameSite, HttpOnly, Secure
mediumFrontend Architecture

Caching Strategies: Client, Server & Edge

TL;DRCache at multiple layers. Memory for speed, CDN for global latency, Redis for shared state. Always define freshness and invalidation strategy first.
High Signal
Google
Meta
Netflix
Agoda
30-Second Answerstart every interview with this

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.

Request Arrives
Check Memory Cache
Check Browser Storage / Redis / CDN
Origin Fetch + Write-Back

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.

PropertyMemory CacheCDNRedis
SpeedFastestGlobal low latencySub-millisecond
Best ForAPI responses, UI stateStatic assets, public contentShared state, sessions, query results
PersistenceSession onlyTTL-basedConfigurable

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
Key Takeaways
  • ✓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
Previous TopicgRPC-Web Fundamentals: Browser Constraints and Proxy ModelNext Topic Data Normalization: Organizing State for Performance

On this page