Основные понятия SWR: устаревшие данные с обновлением

SWR означает «использовать устаревшие данные до завершения повторной проверки актуальности» — это стратегия кэширования HTTP, определённая в RFC 5861. Она заключается в следующем: сразу показывать пользователю устаревшие (кэшированные) данные, затем проверять их актуальность в фоновом режиме и обновлять интерфейс после получения свежих данных.

Такой подход повышает воспринимаемую производительность: пользователи сразу видят данные, а не ждут ответа от сети.

При традиционной загрузке пользователи видят индикатор ожидания при каждом переходе. С SWR они сразу видят последние известные данные, а интерфейс незаметно обновляется в фоновом режиме, если данные изменились.

Благодаря этому приложения кажутся значительно быстрее, а отвлечение пользователя из-за состояний загрузки уменьшается.

SWR автоматически проверяет актуальность данных, когда окно браузера снова получает фокус (пользователь переключается на другую вкладку и возвращается), восстанавливается сетевое подключение после работы в автономном режиме, явно вызывается mutate() или срабатывает таймер refreshInterval.

Эти автоматические триггеры поддерживают актуальность данных без ручного управления логикой повторных запросов со стороны разработчика.

Ключ SWR может находиться в одном из нескольких состояний: загрузка (кэшированных данных нет, выполняется первый запрос), ревалидация (кэшированные данные есть, выполняется фоновое обновление), ошибка (запрос завершился неудачно) или успех (доступны актуальные данные).

Понимание этих состояний помогает создавать точные каркасы загрузки и интерфейсы ошибок.

SWR поддерживает глобальный кэш в памяти, индексируемый ключом запроса (обычно строкой URL). Любой компонент, запрашивающий тот же ключ, получает то же кэшированное значение и участвует в том же цикле ревалидации.

Благодаря автоматическому устранению дубликатов 10 компонентов могут вызвать useSWR с одним и тем же ключом, а сетевой запрос будет выполнен только один раз.

SWR отделяет логику управления кэшем от непосредственного получения данных. Вы предоставляете функцию получения данных: асинхронную функцию, которая принимает ключ и возвращает данные.

Эту функцию можно заменить: используйте fetch, axios, graphql-request или любой другой асинхронный источник данных. SWR управляет кэшированием и ревалидацией независимо от того, как работает функция получения данных.

Оберните приложение в SWRConfig, передав в свойстве value функцию получения данных: value={{ fetcher: (url) => fetch(url).then(r => r.json()) }}. Каждый вызов useSWR без аргумента fetcher использует это глобальное значение по умолчанию.

Это позволяет централизовать настройку API (базовый URL, заголовки авторизации) в одном месте и не повторять её при каждом вызове хука.

Классический подход использует useEffect + useState для ручного управления состояниями загрузки, данных и ошибок. SWR заменяет всё это одним вызовом хука, который автоматически обрабатывает кэширование, устранение дубликатов, фоновое обновление и повтор запросов при ошибках.

Сокращение кода существенно: типичный компонент получения данных уменьшается с 20 и более строк до 3 строк.

Ключ однозначно определяет запрос. В простых случаях используйте строку URL. Для параметризованных запросов используйте ключ-массив: [url, params], где params — стабильный объект или строка. Значение null отключает запрос.

Хорошо спроектированный ключ гарантирует, что связанные запросы используют общие записи кэша, а несвязанные не конфликтуют.

SWR разумно подходит к ревалидации: dedupingInterval (по умолчанию 2 секунды) не позволяет одновременно запускать несколько ревалидаций, если множество компонентов монтируется сразу. В течение окна устранения дубликатов для каждого ключа отправляется только один запрос.

Это предотвращает эффект «стада», распространённый в больших деревьях компонентов, где множество компонентов запрашивает одни и те же данные.

SWR разработан компанией Vercel, создавшей Next.js, поэтому интеграция выполняется без лишних усилий. getServerSideProps или getStaticProps могут заранее получить данные, а SWR восстановит их из этого предварительно загруженного значения на клиенте.

Такой подход даёт начальный HTML, сформированный на сервере, и автоматическую ревалидацию на клиенте при монтировании, объединяя преимущества SSR и SWR.

Какое из следующих действий по умолчанию НЕ запускает ревалидацию SWR?

SWR реализует стратегию использования устаревших данных до завершения повторной проверки актуальности: сразу показывает кэшированные данные, проверяет их актуальность в фоновом режиме и обновляет интерфейс после получения свежих данных. Ревалидация запускается при возвращении фокуса, восстановлении подключения, вызове mutate и периодическом опросе. Глобальный кэш устраняет дубликаты запросов между компонентами, а функцию получения данных можно полностью заменить.

Эта модель значительно упрощает код получения данных и одновременно повышает воспринимаемую производительность.