Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Що робить SWR?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

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

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

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

---

## Що таке SWR

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

Ідея:

1. Спочатку показуємо кешовані дані (якщо вони є);
2. Потім у фоні запитуємо свіжі дані з сервера;
3. Після отримання - оновлюємо 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
Перший рендер →
  1. перевірка кешу
  2. показ старих даних (якщо є)
  3. фонове завантаження нових даних
  4. оновлення кешу
  5. ререндер
```

Це дає **миттєве завантаження 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**:
>
> Показуй кеш одразу.
> Оновлюй дані у фоні.
> Тримай інтерфейс завжди свіжим і швидким.

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати837 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.