Stale-While-Revalidate

Stale-While-Revalidate (SWR) is a cache invalidation strategy defined in HTTP's Cache-Control header (RFC 5861) and popularized as a data fetching paradigm by the Vercel SWR library and React Query. The strategy works in three steps: first, return the cached data immediately (even if stale) so the user sees content instantly; second, send a revalidation request to the origin in the background; third, when the fresh response arrives, update the cache and notify the UI. This gives users the best of both worlds: instant perceived performance with eventual data freshness.

At the HTTP level, the Cache-Control directive 'stale-while-revalidate=60' tells browsers and CDNs to serve stale responses for up to 60 seconds after the max-age expires, while revalidating in the background. At the application level, React Query's default behavior is SWR: queries return cached data immediately, then refetch in the background when the data is stale (determined by staleTime). SWR triggers include window refocus (refetchOnWindowFocus), network reconnection (refetchOnReconnect), component mount, and configurable polling intervals.

SWR is particularly effective for data that changes infrequently but where freshness still matters: dashboards, social feeds, product catalogs, and configuration data. It reduces perceived loading times to near zero after the initial fetch, because subsequent navigations to the same data are served from cache. The pattern works poorly for data that must be absolutely fresh (financial balances, real-time auctions) or where showing stale data would cause user actions to fail. For those cases, you need either real-time synchronization via WebSockets or a blocking revalidation strategy.