SWR
Тема дорожной карты · React
swr — это React-библиотека загрузки данных, разработанная Vercel, реализующая стратегию инвалидации HTTP-кеша stale-while-revalidate: компоненты немедленно получают закешированные (устаревшие) данные, затем swr в фоновом режиме повторно валидирует и перерендеривает с актуальными данными по завершении запроса. Основной хук useSWR принимает ключ (как правило, URL API) и функцию-fetcher, возвращая { data, error, isLoading } — паттерн настолько лаконичный, что он стал шаблоном для хуков загрузки данных в сообществе React. swr обеспечивает автоматическое дедублирование запросов, разделяющих один ключ, глобальную инвалидацию кеша, повторную загрузку при фокусировке, опрос, вспомогательные функции для пагинации и оптимистичные мутации UI, делая его полным решением для управления серверным состоянием в React и Next.js-фронтендах. В отличие от TanStack Query, swr ставит во главу угла минимализм и интеграцию с экосистемой Vercel, поставляясь как чрезвычайно лёгкий пакет, естественно сочетающийся с API-маршрутами Next.js и SSR через fallback-данные, переданные из getServerSideProps. Поддержка TypeScript в swr первоклассная: обобщённые параметры useSWR<Data, Error> гарантируют, что компоненты получают корректно типизированные данные с сервера без ручных приведений типов.
Как это работает
SWR давно ушло от сырого fetch в useEffect. Современные приложения используют TanStack Query (бывший React Query) или SWR — обе управляют кешем, дедупом, фоновым refetch, оптимистичными обновлениями, loading/error состояниями. Паттерн: const {data, isLoading, error} = useQuery({queryKey, queryFn}). Библиотека сама следит за staleness, инвалидацией и пагинацией. Мутации — через useMutation, на успехе инвалидируют нужные queryKeys.
Когда применять
TanStack Query или SWR — для любых нетривиальных async-данных; они экономят недели на кеше и state-водопроводе. Сырой fetch+useEffect — только для простейших one-page демо. Для SSR-приложений (Next.js App Router) предпочитайте server components + server-side fetch; TanStack Query подключайте только для client-side кеша интерактивных view. Всегда рендерите isLoading и error явно — никогда не верьте только happy path.
Типичные ошибки
Ловушки SWR: fetch внутри useEffect без cleanup (race: поздний ответ старого запроса перезаписывает свежие данные); дубликаты queryKey в разных компонентах (коллизии кеша); нет инвалидации кеша после мутации (stale-данные на экране); игнор error-границы (брошенная fetch-ошибка в effect не обрабатывается — оберните в try/catch или используйте error handling библиотеки).