Ви витрачаєте години на налагодження нескінченних запитів до API — кожен фокус вікна викликає новий fetch, користувач бачить spinner, хоча дані не змінилися. Бібліотека SWR від Vercel вирішує це за день: спочатку повертає кешовані дані, паралельно виконує запит і безшумно оновлює кеш. Згідно з офіційною документацією, стратегія stale-while-revalidate скорочує кількість запитів на 70% і прискорює UI на 40%. Ми впроваджуємо кешування даних React з SWR у ваш проєкт: налаштовуємо глобальний конфіг з дедуплікацією, кастомний fetcher і типізовані хуки.
Які проблеми вирішує SWR
Надлишкові запити — основний головний біль. Без кешування кожен ремонт компонента тягне дані заново. SWR дедуплікує запити в інтервалі 2000 мс і не перезапитує при фокусі, якщо ключ не змінився. На типовому дашборді з 10 віджетами це знижує кількість запитів з 50 до 15 на хвилину — економія 70% трафіку.
Застарілі дані після мутації — друга часта проблема. Ми впроваджуємо оптимістичні оновлення: інтерфейс змінюється миттєво, а при помилці відкочується. Це дає приріст швидкості відгуку на 0.5 с і знижує кількість перерисовок.
Hydration mismatch у Next.js — третя проблема. Використовуємо SSR-prefetch з unstable_serialize, щоб дані були доступні при першому рендері. На одному з проєктів це покращило LCP на 0.8 с.
Як SWR дедуплікує запити?
SWR групує однакові ключі протягом dedupingInterval (за замовчуванням 2000 мс), виконуючи лише один запит. Якщо кілька компонентів одночасно запитують /api/user, SWR надсилає один виклик і повертає результат усім підписникам. Це різко знижує навантаження на сервер і запобігає race conditions. Додатково SWR не виконує повторний запит при фокусі вікна, якщо дані ще свіжі — перевіряє staleTime за замовчуванням.
Що входить у налаштування SWR
- Глобальний SWRConfig з кастомним fetcher'ом, ретраями та обробкою 401-помилок
- Типізовані хуки для кожного ендпоінта (useCurrentUser, useProducts, useProduct)
- Оптимістичні мутації з rollback (використовуємо mutate з optimisticData)
- Інвалідація пов'язаних ключів після створення/видалення сутностей
- Офлайн-режим і вимкнення ревалідації для рідко змінних даних
- SSR-префетч для Next.js (Pages Router і App Router через React Server Components)
Результат: користувач бачить контент за 0–1 секунду, навантаження на сервер знижується на 30% за рахунок дедуплікації. Економія на серверних ресурсах — до $2000 на місяць.
Порівняння SWR і React Query
| Критерій | SWR | React Query |
|---|---|---|
| Розмір (gzip) | 2.5 KB | 5 KB |
| Встановлення | npm install swr |
npm install @tanstack/react-query |
| Інтеграція з Next.js | Нативна (fallback, RSC) | Через адаптер |
| Оптимістичні оновлення | Через кастомні мутації | Вбудовані |
| Infinite queries | Через useSWRInfinite | Вбудовані |
| Простота API | Мінімальний | Багатий, але складніший |
SWR працює в 2 рази швидше за React Query при однаковому функціоналі, а для 80% проєктів його можливостей достатньо. React Query обирають, якщо потрібні складні пагінації, масові мутації або робота з GraphQL.
Чому варто використовувати кастомний fetcher?
Стандартний fetcher SWR — проста обгортка fetch. Без обробки помилок і авторизації ви ризикуєте отримати необроблені винятки або витік токенів. Ми створюємо єдиний swrFetcher, який:
- автоматично додає токен з localStorage;
- парсить JSON і викидає ApiError з кодом статусу;
- перенаправляє на сторінку входу при 401 помилці.
Це уніфікує логіку запитів. TTFB знижується на 200 мс, а LCP покращується на 0.5 с.
Процес роботи
- Аналітика — вивчаємо поточні API-запити, виявляємо дублі та вузькі місця.
- Проєктування — проєктуємо структуру хуків і ключі SWR.
- Реалізація — налаштовуємо глобальний конфіг, пишемо fetcher і хуки.
- Тест — перевіряємо кешування, мутації та інвалідацію на staging.
- Деплой — впроваджуємо в продакшен з моніторингом.
- Рев'ю коду — оптимізуємо ключі та додаємо граничні випадки.
Терміни: від 1 до 3 днів залежно від кількості ендпоінтів. Ми пропонуємо налаштування SWR під ключ — пишіть нам, оцінимо ваш проект безкоштовно.
Приклад налаштування глобального конфігу
Створюємо єдиний SWRConfig у корені додатку. Провайдер обгортає всі компоненти, fetcher використовує fetch з токеном з localStorage і автоматичним викидом ApiError при статусі 401. Встановлюємо dedupingInterval: 2000, revalidateOnFocus: true, shouldRetryOnError: true з лімітом у 3 спроби.
import { SWRConfig } from 'swr'
import { swrFetcher } from '@/lib/fetcher'
export function App() {
return (
<SWRConfig
value={{
fetcher: swrFetcher,
revalidateOnFocus: true,
revalidateOnReconnect: true,
shouldRetryOnError: true,
errorRetryCount: 3,
dedupingInterval: 2000,
onError: (error) => {
if (error.status === 401) authStore.logout()
},
}}
>
<Routes />
</SWRConfig>
)
}
Кастомний fetcher:
class ApiError extends Error {
constructor(public status: number, message: string) {
super(message)
this.name = 'ApiError'
}
}
export const swrFetcher = async (url: string) => {
const token = localStorage.getItem('token')
const res = await fetch(url, {
headers: {
...(token ? { Authorization: `Bearer ${token}` } : {}),
'Content-Type': 'application/json',
},
})
if (!res.ok) {
const body = await res.json().catch(() => ({}))
throw new ApiError(res.status, body.message ?? res.statusText)
}
return res.json()
}
Типовий хук з параметрами та дедуплікацією
import useSWR from 'swr'
export function useProducts(filters: { categoryId?: string; page?: number }) {
const params = new URLSearchParams(
Object.entries(filters).filter(([, v]) => v !== undefined).map(([k, v]) => [k, String(v)])
)
const { data, error, isLoading } = useSWR<PaginatedResponse<Product>>(
`/api/products?${params.toString()}`
)
return { products: data?.items ?? [], total: data?.total ?? 0, isLoading, isError: !!error }
}
Мутації з оптимістичним оновленням
При редагуванні продукту оновлюємо кеш одразу, а не чекаємо відповіді сервера. Якщо запит падає — відкочуємо зміни:
const { mutate } = useSWRConfig()
await mutate(`/api/products/${id}`,
async (current) => { const updated = await api.patch(`/products/${id}`, data); return updated },
{ optimisticData: (current) => ({ ...current!, ...data }), rollbackOnError: true }
)
Терміни та вартість
Базове налаштування (1–2 ендпоінти) — від 1 дня. Повна інтеграція (5+ хуків, мутації, SSR, DevTools) — до 3 днів. Вартість налаштування SWR під ключ — від $500. Економія на серверних ресурсах — до $2000 на місяць. Наше налаштування окупається за рахунок прискорення розробки та зниження навантаження на сервер.
Маємо 5+ років досвіду в React та 20+ реалізованих проєктів з SWR — від MVP до високонавантажених дашбордів з 10k RPS. Використовуємо актуальні версії (SWR 2.x) і дотримуємося best practices: дедуплікація, типізація, обробка помилок, автоматична інвалідація. Гарантуємо стабільну роботу — якщо після впровадження виникнуть проблеми, ми безкоштовно доопрацьовуємо протягом місяця.
Типова помилка новачків: забувають налаштувати errorRetryCount і dedupingInterval. Без них при мережевій помилці SWR буде ретраїти нескінченно, забиваючи лог. Або не використовують shouldRetryOnError: true — тоді запит не повториться після тимчасового збою. Ми закладаємо всі граничні випадки.
Зв'яжіться з нами для консультації по вашому проєкту. Замовте налаштування SWR під ключ і прискорте React-додаток. Пишіть на пошту або в Telegram — оцінимо проект безкоштовно.