How does SWR's stale while revalidate strategy work, and why is it useful?

SWR immediately shows any data it already has cached, even if it might be slightly outdated, while quietly fetching a fresh copy in the background at the same time. Once the fresh data arrives, the screen updates automatically. This gives users an instant response instead of a loading spinner, while still keeping the data reasonably up to date.

import useSWR from 'swr';

function Weather() {
  const { data } = useSWR('/api/weather', (url) => fetch(url).then((res) => res.json()));
  if (!data) return <p>Loading</p>;
  return <p>Temperature: {data.temp} degrees</p>;
}