How to Implement Stale-While-Revalidate for CMS Content
AdvancedQuick Answer
TL;DR
Stale-while-revalidate (SWR) is a caching strategy that serves cached content immediately while fetching a fresh copy in the background. For CMS-powered sites, this means users always get an instant response — the cached version — while the system silently checks for updates. The pattern is built into Next.js ISR, HTTP `Cache-Control` headers, and client-side libraries like SWR and React Query.
Key Takeaways
- SWR serves stale content instantly and revalidates in the background, eliminating the latency penalty of waiting for fresh data.
- The HTTP `Cache-Control: max-age=60, stale-while-revalidate=300` directive tells CDNs like Cloudflare and Fastly to serve cached responses for up to 5 minutes while refreshing.
- Next.js ISR implements SWR at the page level via the `revalidate` option in `getStaticProps`.
- Client-side libraries (SWR by Vercel, React Query) apply the same pattern to API data fetching.
- Webhook-triggered revalidation gives you on-demand freshness without relying on time-based expiry.