Используешь ли cash management в нынешней работе

Кэширование в современной веб-разработке

Что такое cache management

Кэширование (cache management) - это техника сохранения данных в быстродоступном хранилище, чтобы избежать повторных дорогостоящих операций (API запросы, вычисления, обращения к БД).

Уровни кэширования

1. HTTP Кэширование (браузер)

Работает на уровне браузера с помощью заголовков:

// Server отправляет заголовки
Cache-Control: max-age=3600 // кэш на 1 час
ETag: "abc123" // версия ресурса
Last-Modified: Wed, 21 Oct 2025 07:28:00 GMT

// Браузер автоматически кэширует и переиспользует

2. Local/Session Storage

Данные, которые хранятся на клиенте:

// Сохранить
localStorage.setItem('user', JSON.stringify({id: 1, name: 'John'}));

// Получить
const user = JSON.parse(localStorage.getItem('user'));

// Хранится до явного удаления или истечения срока

3. Memory Кэш (в приложении)

Прямое хранение в переменных/объектах:

let cachedData = null;
let cacheTimestamp = null;
const CACHE_DURATION = 5 * 60 * 1000; // 5 минут

async function fetchData() {
  const now = Date.now();
  
  // Проверить валидность кэша
  if (cachedData && now - cacheTimestamp < CACHE_DURATION) {
    return cachedData;
  }
  
  // Иначе получить новые данные
  const response = await fetch('/api/data');
  cachedData = await response.json();
  cacheTimestamp = now;
  
  return cachedData;
}

React-специфичные способы

1. React Query / TanStack Query

Популярная библиотека для управления данными:

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

function Users() {
  const { data, isLoading } = useQuery({
    queryKey: ['users'], // ключ кэша
    queryFn: async () => {
      const res = await fetch('/api/users');
      return res.json();
    },
    staleTime: 5 * 60 * 1000, // кэш валиден 5 минут
  });
  
  if (isLoading) return <div>Loading...</div>;
  return <div>{data}</div>;
}

2. Context API + useMemo

Внутриприложения:

const DataContext = createContext();

function DataProvider({children}) {
  const [data, setData] = useState(null);
  
  const cachedValue = useMemo(() => ({
    data,
    setData
  }), [data]);
  
  return (
    <DataContext.Provider value={cachedValue}>
      {children}
    </DataContext.Provider>
  );
}

3. Zustand / Redux

Глобальное состояние с кэшированием:

import create from 'zustand';

const useStore = create((set) => ({
  users: [],
  fetchUsers: async () => {
    const data = await fetch('/api/users').then(r => r.json());
    set({ users: data });
  },
}));

Практический пример: SWR (stale-while-revalidate)

import useSWR from 'swr';

function Profile() {
  // Получить кэшированные данные сразу, затем обновить
  const { data, error } = useSWR('/api/user', fetcher, {
    revalidateOnFocus: false, // не обновлять при фокусе окна
    dedupingInterval: 60000, // не делать дубли запросов 1 минуту
  });
  
  if (error) return <div>Error</div>;
  if (!data) return <div>Loading...</div>;
  
  return <div>{data.name}</div>;
}

Когда использовать кэширование

• Часто запрашиваемые данные (профиль пользователя, список категорий)
• Тяжёлые вычисления (фильтрация, сортировка больших списков)
• Стабильные данные (справочники, настройки)
• Оффлайн функциональность

Когда НЕ использовать

• Критически важные данные (текущий баланс, статус платежа)
• Часто меняющиеся данные (live chat, notifications)
• Конфиденциальные данные (пароли, токены) - только в памяти

Вывод

Кэширование - это критичный навык для фронтенд-разработчика. Правильное использование кэша улучшает:

• UX (быстрее загружается)
• Производительность (меньше запросов)
• Оффлайн функциональность

Выбор инструмента (React Query, SWR, localStorage) зависит от специфики проекта.