Cache

Choosing engine Redis: rich data types, persistence, clustering, scripts; good for queues/rate limits. Memcached: simple KV, pure in-memory, fast; great for stateless caches. Design Namespaced keys, versioned; TTL with jitter; avoid giant values. Pick eviction (LRU/LFU); monitor hit rate and evictions. Stampede control: locks/SETNX, stale-while-revalidate, per-key backoff. Ops Pooling + timeouts; alert on latency, evictions, memory fragmentation. For Redis, persistence config (AOF/RDB) matched to durability needs; replicas for HA. For Memcached, spread slabs; watch for evictions of hot slabs. Checklist Engine chosen per use case; durability/HA decided. TTLs + jitter; stampede protection in place. Metrics for hit/miss/evictions/latency.

This note condenses the DEV article “Mastering Frontend Performance: Harnessing the Power of Caching” into actionable steps for modern apps. Why cache Reduce network and CPU cost for repeated data/computation. Improve perceived speed and resilience to flaky networks. Keep UIs responsive under load. Layers to combine HTTP caching: set Cache-Control, ETag, Last-Modified, stale-while-revalidate for API/static responses; prefer immutable, versioned assets. Client memoization: cache expensive computations/render data (useMemo, useCallback, memoized selectors). Data caching: use React Query/SWR/Apollo to dedupe fetches, retry, refetch on focus. Service worker (when appropriate): offline/near-edge caching for shell + static assets. React hook hygiene Memoize derived data: useMemo(() => heavyCompute(input), [input]). Memoize callbacks passed to children to avoid re-renders: useCallback(fn, deps). Keep props stable; avoid recreating objects/functions each render. HTTP cache playbook Static assets: long max-age + immutable on versioned filenames. APIs: choose strategy per route: idempotent reads: max-age/stale-while-revalidate with ETag. personalized or sensitive data: no-store. list endpoints: shorter max-age + revalidation. Prefer CDN edge caching; compress (Brotli) and serve modern formats (AVIF/WebP). UI checks No spinner longer than a couple of seconds; use skeletons and optimistic updates where safe. Avoid layout shift when cached data arrives—reserve space. Track Core Web Vitals (LCP/INP/CLS) and hit-rate for key caches. Quick checklist Versioned static assets + long-lived caching headers. API cache policy per route with ETag/stale-while-revalidate. React memoization for heavy work and stable callbacks. Data-layer cache (React Query/SWR) with sensible stale times + retries. RUM/CI dashboards watching Web Vitals and cache hit rates. Takeaway: Combine HTTP caching, client memoization, and data-layer caches to ship faster pages and keep them fast under real traffic.