Що робить SWR?

ReactJunior~3 хв читання

SWR - це легка і дуже елегантна бібліотека від Vercel (творців Next.js), призначена для керування даними, отриманими з API (fetch, axios тощо) у React.

Вона схожа за ідеєю на React Query (TanStack Query), але простіша, легша і заснована на ключовій концепції Stale-While-Revalidate.

Розберемо детально.

Що таке SWR

SWR розшифровується як "Stale-While-Revalidate", що дослівно означає "застарілі дані, поки триває повторна валідація".

Ідея:

Спочатку показуємо кешовані дані (якщо вони є);
Потім у фоні запитуємо свіжі дані з сервера;
Після отримання - оновлюємо UI.

Тобто користувач одразу бачить контент (з кешу), а React автоматично підтягує нові дані у фоні.

Приклад базового використання

javascript

import useSWR from 'swr';

// fetcher - будь-яка функція, що повертає Promise з даними
const fetcher = (url: string) => fetch(url).then(res => res.json());

export default function Profile() {
  const { data, error, isLoading } = useSWR('/api/user', fetcher);

  if (isLoading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return <div>Hello, {data.name}!</div>;
}

Що робить SWR під капотом:

Перевіряє, чи є дані за ключем '/api/user' в кеші;
Якщо є → показує їх одразу (stale);
Одночасно запускає fetcher() (revalidate);
Після отримання нових даних → оновлює кеш і викликає ререндер.

Життєвий цикл SWR-запиту

javascript

Перший рендер →
перевірка кешу
показ старих даних (якщо є)
фонове завантаження нових даних
оновлення кешу
ререндер

Це дає миттєве завантаження UI без "блимаючого" стану "Loading...".

Основні фічі SWR

1. Кешування даних

SWR зберігає дані у глобальному кеші (in-memory) за ключем:

javascript

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

Якщо інший компонент запросить той самий /api/user - він отримає дані миттєво з кешу, без нового запиту.

2. Stale-While-Revalidate

Основна концепція бібліотеки: показуємо старе, вантажимо нове.

javascript

useSWR('/api/user', fetcher, { refreshInterval: 10000 });

оновлює дані кожні 10 секунд у фоні, не показуючи "loading".

3. Deduplication

Якщо кілька компонентів викликають один і той самий ключ одночасно - SWR зробить тільки один запит, а результат поширить на всіх.

4. Автоматична повторна валідація

SWR автоматично рефетчить дані:

при фокусі вкладки (refetchOnFocus);
при відновленні з'єднання (refetchOnReconnect);
за таймером (refreshInterval).

javascript

useSWR('/api/posts', fetcher, {
  revalidateOnFocus: true,
  revalidateOnReconnect: true,
  refreshInterval: 30000,
});

5. Mutations (оновлення та інвалідація кешу)

Після зміни даних можна оновити кеш вручну через mutate():

javascript

import useSWR, { mutate } from 'swr';

// Зміна даних на сервері
await fetch('/api/user', {
  method: 'PATCH',
  body: JSON.stringify({ name: 'Alex' })
});

// Оновлюємо кеш
mutate('/api/user'); // SWR зробить повторний fetch і оновить UI

6. Optimistic update (оптимістичне оновлення)

Можна миттєво оновити UI до відповіді сервера:

javascript

mutate(
  '/api/user',
  { ...data, name: 'Alex' }, // новий стан
  { optimisticData: { ...data, name: 'Alex' }, rollbackOnError: true }
);

→ UI оновлюється миттєво, якщо сервер повернув помилку - все відкочується.

7. Prefetch (попереднє завантаження даних)

Можна заздалегідь "розігріти" кеш:

javascript

import { preload } from 'swr';

preload('/api/user', fetcher); // завантажить і покладе в кеш до першого рендера

8. Suspense + Concurrent Mode (React 18)

SWR чудово інтегрується з React Suspense:

javascript

const { data } = useSWR('/api/user', fetcher, { suspense: true });
return <p>{data.name}</p>;

React сам "призупинить" рендер, поки дані не прийдуть.

9. Persist кешу

Можна зберігати кеш між перезавантаженнями:

javascript

import { SWRConfig } from 'swr';

<SWRConfig value={{
  provider: () => new Map(),
  persistProvider: true,
}}>
  <App />
</SWRConfig>

SWR vs React Query

Можливість	SWR	React Query (TanStack Query)
Розмір	Менший, простіший	Більший, потужніший
Основна ідея	Stale-While-Revalidate	Кеш + керування lifecycle
API	Мінімальне (`useSWR`, `mutate`)	Більш деталізоване (`useQuery`, `useMutation`, `QueryClient`)
Автоматичне оновлення	Так	Так
Deduplication	Так	Так
Оптимістичні оновлення	Так (через mutate)	Так (через useMutation)
Infinite Scroll / Pagination	вручну	вбудовано
Підходить для	UI з REST / GraphQL	REST, GraphQL, складні data-flow
Філософія	Простота і прозорість	Повний контроль над кешем і станом

Іншими словами:

SWR - ідеально для фронтенду/Next.js (прості API, кеш, автоповторний запит);
React Query - краще для великих застосунків з CRUD-операціями, мутаціями, пагінацією і складною логікою.

Підсумок

Що робить SWR	Навіщо потрібно
Кешує результати запитів	Миттєвий UI без зайвих fetch
Автоматично оновлює дані	UI завжди свіжий
Показує старі дані миттєво	Немає "Loading" при поверненні
Deduplicates запити	Один запит → багато компонентів
Керує валідацією і мутацією	Проста синхронізація з сервером
Працює з Suspense	Підтримка Concurrent React
Мінімальний API	Легко вчити і впроваджувати

Коротко:

SWR - це легкий і розумний інструмент для завантаження даних у React, побудований на принципі Stale-While-Revalidate:

Показуй кеш одразу. Оновлюй дані у фоні. Тримай інтерфейс завжди свіжим і швидким.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.