SWR
SWR is a lightweight React data-fetching library, created by Vercel, whose name comes from the HTTP caching strategy 'stale-while-revalidate' — returning cached data immediately while fetching fresh data in the background.
Definition
SWR is a lightweight React data-fetching library, created by Vercel, whose name comes from the HTTP caching strategy 'stale-while-revalidate' — returning cached data immediately while fetching fresh data in the background.
Overview
SWR follows the stale-while-revalidate pattern defined in HTTP caching standards: when data is requested, SWR first returns any cached ('stale') value it already has so the UI can render instantly, then sends a request in the background to revalidate and update that data, re-rendering the component once fresh data arrives. This gives users a fast perceived experience without sacrificing data freshness. The library exposes a single primary hook, useSWR(key, fetcher), where the key uniquely identifies the request (and doubles as the cache key) and the fetcher is any function — commonly a wrapped fetch or axios call — that resolves the data. SWR automatically handles deduplication of identical in-flight requests, revalidation on window focus and network reconnect, and polling at a configurable interval, all with a deliberately small and minimal API surface compared to more feature-rich alternatives. Built and maintained by Next.js's creator Vercel, SWR is a natural fit within the Next.js ecosystem though it works in any React application. Its closest and most direct comparison is TanStack Query, which implements a similar caching philosophy but with a larger, more feature-complete API (mutations, infinite queries, multi-framework support); teams often choose between them based on how much built-in functionality they need versus how minimal they want their data-fetching layer to be.
Key Features
- Implements the stale-while-revalidate caching strategy from HTTP standards
- Single useSWR hook combining fetching, caching, and revalidation
- Automatic deduplication of identical concurrent requests
- Revalidation on window focus, network reconnect, and configurable polling
- Minimal, lightweight API surface compared to more full-featured alternatives
- Built and maintained by Vercel, the creators of Next.js
- Works with any fetching mechanism (fetch, axios, GraphQL clients) via a custom fetcher