> Как можно закэшировать данные useSWR, чтобы при возврате на страницу данные брались из кэша (React)

useSWR по умолчанию автоматически кэширует данные на основе ключа. Чтобы данные сохранялись при возврате на страницу, достаточно убедиться, что ключ остаётся одинаковым. Например:

JSX
import useSWR from 'swr';

function Profile() {
  const { data } = useSWR('/api/user', fetcher);
  // ...
}

При повторном монтировании компонента useSWR сначала вернёт закэшированные данные (stale), а затем обновит их в фоне (revalidate). Для более тонкого контроля можно настроить dedupingInterval (время, в течение которого повторные запросы игнорируются) или revalidateIfStale (по умолчанию true). Если нужно полностью избежать повторного запроса при возврате, используйте revalidateOnFocus: false и revalidateOnReconnect: false. Для глобального кэша можно задать провайдер, например, localStorage:

JSX
import { SWRConfig } from 'swr';

function App() {
  return (
    <SWRConfig value={{ provider: () => new Map(JSON.parse(localStorage.getItem('swr-cache') || '[]')) }}>
      <Profile />
    </SWRConfig>
  );
}

Но обычно встроенного кэша достаточно - он живёт, пока не перезагрузится страница.