← Lessons

quiz vs the machine

Gold1340

Frontend

The Stale While Revalidate

Show cached data instantly while quietly refetching in the background to keep it fresh.

4 min read · core · beat Gold to climb

Serve stale, fetch fresh

Stale while revalidate is a caching strategy where the app immediately returns the cached value, even if it is a little old, and at the same time kicks off a background refetch. When the fresh data arrives, the UI updates quietly.

  • The user never stares at a spinner for data that already exists.
  • Staleness is bounded because a refresh runs in parallel.
  • The screen reconciles to the new value when it lands.

Staleness windows

The strategy is tuned by a stale time that says how long cached data is considered fresh enough to skip refetching.

  • Within stale time, reads come straight from cache with no network call.
  • After stale time, a read returns cache and triggers a background refresh.
  • A separate cache time controls how long unused data is kept before garbage collection.

Trade offs to accept

You accept showing slightly old data for a moment in exchange for speed. For dashboards and feeds that is usually fine, but for prices or seats you may want a shorter stale time or a forced refetch so users never act on outdated numbers.

Key idea

Stale while revalidate returns cached data instantly while refetching in the background, trading brief staleness for a fast and self healing UI.

Check yourself

Answer to earn rating on the learn ladder.

1. What does stale while revalidate do on a read after stale time?

2. What does the stale time setting control?