Web Fundamentals

Caching Strategies: Client, Server & Edge

Web Fundamentals Map

Rendering & Browser Architecture

Critical Rendering PathScript Loading Patterns (async/defer)Event Loop Deep DiveJavaScript Module Systems (CJS, ESM, UMD)Dynamic Module Loading (import())Import on InteractionImport on VisibilityBrowser Rendering Pipeline & Layout ThrashingRendering Strategies (CSR, SSR, SSG, ISR)Streaming SSR & Progressive HTMLIslands ArchitectureReact Server ComponentsFramework Reactivity (React, Vue, Svelte, Solid)HTTP/1.1 vs HTTP/2 vs HTTP/3 (QUIC)DNS Resolution & TTL Caching

Performance

Core Web Vitals: LCP, INP, CLSPerformance Optimization Trade-offsCritical Resource PrioritizationCode Splitting & Dynamic ImportsTree Shaking & Dead Code EliminationLazy LoadingResource Hints: Preload, Prefetch & PreconnectText Compression: Gzip & BrotliImage & Video OptimizationAdaptive LoadingList VirtualizationWeb Workers vs Main ThreadMemory Leaks: Detection & PreventionManaging Third-Party ScriptsHow CDNs WorkHTTP Caching Deep DiveService Workers & Offline StrategyPWA Fundamentals

Security

Cross-Site Scripting (XSS)Cross-Site Request Forgery (CSRF)CORS ExplainedCORS Preflight, Credentials & MisconfigurationsContent Security Policy (CSP)Why is HTTPS Secure? (TLS/SSL)Authorization Best PracticesCookie Security & Session Hardening

State & Data Architecture

State Management Guide (Context vs Zustand vs Redux)React Query & Server State CachingData Fetching PatternsCaching StrategiesPagination: Offset vs Cursor-BasedReal-time Communication (WebSocket, SSE, Polling)
mediumWeb Fundamentals

Caching Strategies: Client, Server & Edge

Learn the interview-ready mental model, practical trade-offs, and production patterns for this web fundamentals topic.

Topic content

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.

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
PreviousNext

Topic Guide

On this page