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

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

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

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

Контент

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

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

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

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

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

## Що означає «кешувати результати запитів»?

Кешування (від англ. *cache*) - це **тимчасове збереження результатів запитів**,
щоб при повторному зверненні до тих самих даних **не робити новий HTTP-запит**,
а використовувати вже отримані дані з пам'яті.

Приклад:

```javascript
// Без кешу - щоразу новий запит
await fetch('/api/products');

// З кешем - беремо збережений результат, якщо він ще актуальний
cache.get('/api/products') ?? fetch('/api/products');
```

---

## Навіщо взагалі кешувати?

### 1. **Швидкість (прискорення UI)**

Кожен запит до сервера:

- займає час (навіть 100-300 мс - вже помітно);
- викликає зайві рендери, "миготіння" лоадерів;
- може бути дорогим (база, API третіх сторін).

Коли ти кешуєш результат, повторні звернення до тих самих даних:

- приходять **миттєво** з пам'яті (RAM);
- не показують лоадер;
- створюють відчуття «реактивного» інтерфейсу, як у нативних застосунках.

Користувач миттєво перемикається між сторінками і вкладками без повторного завантаження.

---

### 2. **Зниження навантаження на сервер**

Без кешу 100 користувачів, що відкрили `/products`, зроблять 100 запитів.
З кешем - **один запит**, а решта отримають дані локально.

Результат:

- менше трафіку,
- менша latency,
- дешевша інфраструктура,
- API живе довше без перевантажень.

---

### 3. **Зменшення кількості станів "loading"**

Коли ти переходиш між сторінками і повертаєшся назад:

- без кешу → знову "Loading...",
- з кешем → дані вже є, UI миттєво відображається.

Це різко покращує UX (сприйняття "швидкості" інтерфейсу).

---

### 4. **Офлайн і "stale-while-revalidate" режими**

Кеш дозволяє:

- **показувати старі дані офлайн** (наприклад, при втраті мережі),
- **оновлювати дані у фоні**, не блокуючи користувача.

Цей патерн називається **Stale-While-Revalidate (SWR)**:

1. Покажи застарілі (cached) дані миттєво.
2. У фоні відправ запит за свіжими.
3. Коли прийдуть нові - онови UI.

---

### 5. **Уникнення "дубльованих запитів"**

Якщо компонент A і компонент B одночасно роблять один і той самий запит:

```javascript
fetch('/api/user')
fetch('/api/user')
```

без кешу сервер отримає два запити.
З кешем (або бібліотекою на кшталт React Query) - **лише один запит**,
а обидва компоненти отримають той самий результат з кешу.

Це називається **deduplication (дедуплікація запитів)**.

---

### 6. **Оптимізація UX при навігації**

Якщо ти:

- відкрив сторінку списку (`/products`),
- потім перейшов на картку товару (`/products/42`),
- а потім повернувся назад,

то без кешу сторінка списку знову завантажиться з нуля.
З кешем - **список вже в пам'яті**, і React покаже його миттєво.

---

## Як кешувати в React на практиці

### 1. Вручну через `Map` або `localStorage`

```javascript
const cache = new Map();

async function fetchWithCache(url) {
  if (cache.has(url)) return cache.get(url);
  const res = await fetch(url);
  const data = await res.json();
  cache.set(url, data);
  return data;
}
```

Плюси: просто, працює.
Мінуси: немає інвалідації, застарілі дані, дублювання логіки.

---

### 2. Через **React Query** (TanStack Query)

Сучасний стандарт для кешування даних у React-застосунках:

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

function User({ id }) {
  const { data, isLoading } = useQuery({
    queryKey: ['user', id],
    queryFn: () => fetch(`/api/users/${id}`).then(r => r.json()),
    staleTime: 5 * 60 * 1000, // 5 хвилин кеш
  });

if (isLoading) return Завантаження...;
 return {data.name};
}
```

React Query:

- кешує дані в пам'яті (`QueryClient`);
- робить **deduplication**;
- керує `stale` і `refetch`;
- автоматично оновлює при фокусі вкладки;
- можна задати `staleTime`, `cacheTime`, `refetchOnMount` та ін.

---

### 3. Через **SWR (by Vercel)**

Легка бібліотека, побудована на концепції Stale-While-Revalidate:

```javascript
import useSWR from 'swr';

const fetcher = url => fetch(url).then(r => r.json());

function User({ id }) {
  const { data, error, isLoading } = useSWR(`/api/users/${id}`, fetcher);

if (isLoading) return Loading...;
 if (error) return Error...;
 return {data.name};
}
```

SWR автоматично:

- кешує дані за ключем (`/api/users/${id}`);
- оновлює фонові дані при поверненні на сторінку;
- дозволяє використовувати `mutate()` для ручного оновлення кешу.

---

### 4. Persisted cache (збереження кешу між сесіями)

React Query, SWR і Apollo Client підтримують **persist-кеш**:

- зберігає кеш у `localStorage` або `IndexedDB`;
- при перезапуску застосунку - дані миттєво доступні;
- API-запит виконується у фоні для синхронізації.

---

## ПІДСУМОК

| Причина | Навіщо кешувати |
|---|---|
| Швидкість | Миттєве відображення даних без лоадерів |
| UX | Стабільний інтерфейс при навігації і поверненнях |
| Оптимізація мережі | Менше запитів → менша latency і навантаження |
| Deduplication | Один запит - багато споживачів |
| SWR-підхід | Показує старе → оновлює нове |
| Офлайн | Можна працювати без мережі |
| Стійкість | Навіть при мережевій помилці UX не ламається |

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

Для рев’юера

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

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