{"type":"doc","content":[{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"⚙️ Что значит «кэшировать результаты запросов»?"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Кэширование (от англ. "},{"type":"text","marks":[{"type":"italic"}],"text":"cache"},{"type":"text","text":") — это "},{"type":"text","marks":[{"type":"bold"}],"text":"временное сохранение результатов запросов"},{"type":"text","text":","},{"type":"hardBreak"},{"type":"text","text":"чтобы при повторном обращении к тем же данным "},{"type":"text","marks":[{"type":"bold"}],"text":"не делать новый HTTP-запрос"},{"type":"text","text":","},{"type":"hardBreak"},{"type":"text","text":"а использовать уже полученные данные из памяти."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Пример:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"// Без кэша — каждый раз новый запрос\nawait fetch('/api/products');\n\n// С кэшем — берём сохранённый результат, если он ещё актуален\ncache.get('/api/products') ?? fetch('/api/products');\n"}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🚀 Зачем вообще кэшировать?"}]},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"1. "},{"type":"text","marks":[{"type":"bold"}],"text":"Скорость (ускорение UI)"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Каждый запрос к серверу:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"занимает время (даже 100–300 мс — уже заметно);"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"вызывает лишние рендеры, “мигание” лоадеров;"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"может быть дорогостоящим (база, API третьих сторон)."}]}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Когда ты кэшируешь результат, повторные обращения к тем же данным:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"приходят "},{"type":"text","marks":[{"type":"bold"}],"text":"мгновенно"},{"type":"text","text":" из памяти (RAM);"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"не показывают лоадер;"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"создают ощущение «реактивного» интерфейса, как в нативных приложениях."}]}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"👉 Пользователь мгновенно переключается между страницами и вкладками без повторной загрузки."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"2. "},{"type":"text","marks":[{"type":"bold"}],"text":"Снижение нагрузки на сервер"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Без кэша 100 пользователей, открывших "},{"type":"text","marks":[{"type":"code"}],"text":"/products"},{"type":"text","text":", сделают 100 запросов."},{"type":"hardBreak"},{"type":"text","text":"С кэшем — "},{"type":"text","marks":[{"type":"bold"}],"text":"один запрос"},{"type":"text","text":", а остальные получат данные локально."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Результат:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"меньше трафика,"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"меньше latency,"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"дешевле инфраструктура,"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"API живёт дольше без перегрузок."}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"3. "},{"type":"text","marks":[{"type":"bold"}],"text":"Уменьшение количества состояний \"loading\""}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Когда ты переходишь между страницами и возвращаешься назад:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"без кэша → снова \"Loading...\","}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"с кэшем → данные уже есть, UI мгновенно отображается."}]}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Это резко улучшает UX (восприятие \"скорости\" интерфейса)."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"4. "},{"type":"text","marks":[{"type":"bold"}],"text":"Offline и \"stale-while-revalidate\" режимы"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Кэш позволяет:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"показывать старые данные офлайн"},{"type":"text","text":" (например, при потере сети),"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"обновлять данные фоном"},{"type":"text","text":", не блокируя пользователя."}]}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"📘 Этот паттерн называется "},{"type":"text","marks":[{"type":"bold"}],"text":"Stale-While-Revalidate (SWR)"},{"type":"text","text":":"}]},{"type":"orderedList","attrs":{"start":1,"type":null},"content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Покажи устаревшие (cached) данные мгновенно."}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"В фоне отправь запрос за свежими."}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Когда придут новые — обнови UI."}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"5. "},{"type":"text","marks":[{"type":"bold"}],"text":"Избежание \"дублирующихся запросов\""}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Если компонент A и компонент B одновременно делают один и тот же запрос:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"fetch('/api/user')\nfetch('/api/user')\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"— без кэша сервер получит два запроса."},{"type":"hardBreak"},{"type":"text","text":"С кэшем (или библиотекой вроде React Query) — "},{"type":"text","marks":[{"type":"bold"}],"text":"только один запрос"},{"type":"text","text":","},{"type":"hardBreak"},{"type":"text","text":"а оба компонента получат один и тот же результат из кэша."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Это называется "},{"type":"text","marks":[{"type":"bold"}],"text":"deduplication (дедупликация запросов)"},{"type":"text","text":"."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"6. "},{"type":"text","marks":[{"type":"bold"}],"text":"Оптимизация UX при навигации"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Если ты:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"открыл страницу списка ("},{"type":"text","marks":[{"type":"code"}],"text":"/products"},{"type":"text","text":"),"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"затем перешёл на карточку товара ("},{"type":"text","marks":[{"type":"code"}],"text":"/products/42"},{"type":"text","text":"),"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"а потом вернулся назад —"}]}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"то без кэша страница списка снова загрузится с нуля."},{"type":"hardBreak"},{"type":"text","text":"С кэшем — "},{"type":"text","marks":[{"type":"bold"}],"text":"список уже в памяти"},{"type":"text","text":", и React покажет его мгновенно."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"📦 Как кэшировать в React на практике"}]},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"🧩 1. Вручную через "},{"type":"text","marks":[{"type":"code"}],"text":"Map"},{"type":"text","text":" или "},{"type":"text","marks":[{"type":"code"}],"text":"localStorage"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"const cache = new Map();\n\nasync function fetchWithCache(url) {\n if (cache.has(url)) return cache.get(url);\n const res = await fetch(url);\n const data = await res.json();\n cache.set(url, data);\n return data;\n}\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"🟢 Плюсы: просто, работает."},{"type":"hardBreak"},{"type":"text","text":"🔴 Минусы: нет инвалидации, stale-данные, дублирование логики."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"🧠 2. Через "},{"type":"text","marks":[{"type":"bold"}],"text":"React Query"},{"type":"text","text":" (TanStack Query)"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Современный стандарт для кэширования данных в React-приложениях:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"import { useQuery } from '@tanstack/react-query';\n\nfunction User({ id }) {\n const { data, isLoading } = useQuery({\n queryKey: ['user', id],\n queryFn: () => fetch(`/api/users/${id}`).then(r => r.json()),\n staleTime: 5 * 60 * 1000, // 5 минут кэш\n });\n\n if (isLoading) return

Загрузка...

;\n return

{data.name}

;\n}\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"📘 React Query:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"кэширует данные в памяти ("},{"type":"text","marks":[{"type":"code"}],"text":"QueryClient"},{"type":"text","text":");"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"делает "},{"type":"text","marks":[{"type":"bold"}],"text":"deduplication"},{"type":"text","text":";"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"управляет "},{"type":"text","marks":[{"type":"code"}],"text":"stale"},{"type":"text","text":" и "},{"type":"text","marks":[{"type":"code"}],"text":"refetch"},{"type":"text","text":";"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"автоматически обновляет при фокусе вкладки;"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"можно задать "},{"type":"text","marks":[{"type":"code"}],"text":"staleTime"},{"type":"text","text":", "},{"type":"text","marks":[{"type":"code"}],"text":"cacheTime"},{"type":"text","text":", "},{"type":"text","marks":[{"type":"code"}],"text":"refetchOnMount"},{"type":"text","text":" и др."}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"🧩 3. Через "},{"type":"text","marks":[{"type":"bold"}],"text":"SWR (by Vercel)"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Лёгкая библиотека, построенная на концепции Stale-While-Revalidate:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"import useSWR from 'swr';\n\nconst fetcher = url => fetch(url).then(r => r.json());\n\nfunction User({ id }) {\n const { data, error, isLoading } = useSWR(`/api/users/${id}`, fetcher);\n\n if (isLoading) return

;\n if (error) return

Error...

;\n return

{data.name}

;\n}\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"SWR автоматически:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"кэширует данные по ключу ("},{"type":"text","marks":[{"type":"code"}],"text":"/api/users/${id}"},{"type":"text","text":");"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"обновляет фоновые данные при возвращении на страницу;"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"позволяет использовать "},{"type":"text","marks":[{"type":"code"}],"text":"mutate()"},{"type":"text","text":" для ручного обновления кэша."}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"⚙️ 4. Persisted cache (сохранение кэша между сессиями)"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"React Query, SWR и Apollo Client поддерживают "},{"type":"text","marks":[{"type":"bold"}],"text":"persist-кэш"},{"type":"text","text":":"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"сохраняет кэш в "},{"type":"text","marks":[{"type":"code"}],"text":"localStorage"},{"type":"text","text":" или "},{"type":"text","marks":[{"type":"code"}],"text":"IndexedDB"},{"type":"text","text":";"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"при перезапуске приложения — данные мгновенно доступны;"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"API-запрос выполняется фоном для синхронизации."}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"⚖️ ИТОГ"}]},{"type":"table","content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Причина"}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Зачем кэшировать"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"⚡ Скорость"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Мгновенное отображение данных без лоадеров"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"🧠 UX"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Стабильный интерфейс при навигации и возвратах"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"🌐 Оптимизация сети"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Меньше запросов → меньше latency и нагрузка"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"🧩 Deduplication"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Один запрос — много потребителей"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"🔄 SWR-подход"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Показывает старое → обновляет новое"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"📦 Offline"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Можно работать без сети"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"🧱 Устойчивость"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Даже при ошибке сеть не ломает UX"}]}]}]}]},{"type":"paragraph","attrs":{"textAlign":null}}]}

Зачем кешировать результаты запросов?

Комментарии