Что такое Stale-While-Revalidate и как этот подход реализован в React Query?

Что такое Stale-While-Revalidate?

Stale-While-Revalidate (SWR) — это стратегия кэширования, которая позволяет балансировать между скоростью отклика и актуальностью данных. Основная идея заключается в том, что при запросе данных сначала возвращается кэшированная (возможно, устаревшая) версия, а затем в фоновом режиме выполняется запрос на сервер для получения свежих данных. Это обеспечивает мгновенный отклик для пользователя и постепенное обновление информации.

Реализация в React Query

React Query (теперь TanStack Query) использует эту стратегию по умолчанию. Ключевые параметры конфигурации:

• staleTime — время в миллисекундах, в течение которого данные считаются свежими. По умолчанию 0, то есть данные сразу считаются устаревшими.
• cacheTime — время хранения данных в кэше после того, как они перестали использоваться. По умолчанию 5 минут.

Когда компонент запрашивает данные, React Query проверяет кэш:

1. Если данные есть и не устарели (staleTime не истек), возвращаются сразу.
2. Если данные есть, но устарели, возвращаются кэшированные данные, и запускается фоновый refetch.
3. Если данных нет, выполняется обычный запрос.

Пример кода

import { useQuery } from '@tanstack/react-query';

function UserProfile({ userId }) {
  const { data, isLoading, isStale } = useQuery({
    queryKey: ['user', userId],
    queryFn: () => fetch(`/api/users/${userId}`).then(res => res.json()),
    staleTime: 5 * 60 * 1000, // 5 минут данные считаются свежими
    cacheTime: 10 * 60 * 1000, // 10 минут хранятся в кэше
  });

  if (isLoading) return <div>Loading...</div>;
  return <div>{data.name} {isStale ? '(updating...)' : ''}</div>;
}

Вывод

Stale-While-Revalidate в React Query позволяет создавать быстрые и отзывчивые интерфейсы, минимизируя задержки для пользователя. Эта стратегия особенно полезна для приложений, где важна скорость отклика, а данные могут быть немного устаревшими (например, лента новостей или список товаров).