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.