0Pricing
React Academy · Lesson

SWR Core Concepts: Stale-While-Revalidate

Understand SWR's caching strategy: serve stale data immediately, revalidate in the background, update when fresh.

What Does SWR Stand For?

SWR stands for Stale-While-Revalidate, an HTTP cache strategy defined in RFC 5861. The strategy is: serve stale (cached) data immediately to the user, then revalidate in the background, and update the UI when fresh data arrives.

This approach prioritizes perceived performance: users see data instantly rather than waiting for a network round-trip.

The User Experience Benefit

With traditional loading patterns, users see a spinner on every navigation. With SWR, they see the last known data immediately and the UI updates silently in the background if the data has changed.

This makes applications feel significantly faster and reduces the cognitive disruption of loading states.

All lessons in this course

  1. SWR Core Concepts: Stale-While-Revalidate
  2. useSWR Hook: Fetching, Loading, and Error States
  3. Mutation and Optimistic Updates with SWR
  4. SWR vs React Query: Choosing the Right Tool
← Back to React Academy