Как организовать проверку актуальности данных, закэшированных в клиентском хранилище состояния, если данные на бэкенде часто меняются?

Проблема устаревших данных

Когда данные на бэкенде меняются часто, клиентское хранилище состояния (например, Redux, Zustand или локальный кэш) может содержать устаревшую информацию. Это приводит к некорректному отображению и ошибкам в пользовательском интерфейсе. Основная задача — организовать проверку актуальности данных, не перегружая сервер лишними запросами.

Основные стратегии

• TTL (Time To Live): храните время последнего обновления и сравнивайте с текущим. Если прошло больше заданного интервала, выполняйте повторный запрос.
• Версионирование: бэкенд возвращает версию данных (например, в заголовке ETag). Клиент отправляет её при запросе, и сервер отвечает 304 Not Modified, если данные не изменились.
• Автоматическая ревалидация: используйте библиотеки, такие как React Query или SWR, которые поддерживают фоновое обновление по таймеру, при фокусе окна или после мутаций.
• Ручная инвалидация: после выполнения операций, изменяющих данные (POST, PUT, DELETE), принудительно очищайте или обновляйте соответствующий кэш.

Практический пример с Redux и TTL

// action creator для загрузки данных с проверкой TTL
export const fetchDataIfNeeded = () => (dispatch, getState) => {
  const { data, lastUpdated } = getState().data;
  const now = Date.now();
  const TTL = 60000; // 1 минута

  if (data && now - lastUpdated < TTL) {
    return; // данные свежие, пропускаем запрос
  }

  dispatch({ type: 'FETCH_START' });
  fetch('/api/data')
    .then(res => res.json())
    .then(data => dispatch({ type: 'FETCH_SUCCESS', data, lastUpdated: now }))
    .catch(err => dispatch({ type: 'FETCH_ERROR', err }));
};

В этом примере при каждом вызове проверяется, не истёк ли TTL. Если данные ещё актуальны, запрос не отправляется.

Использование React Query для автоматической ревалидации

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

function useData() {
  return useQuery({
    queryKey: ['data'],
    queryFn: () => fetch('/api/data').then(res => res.json()),
    staleTime: 30000, // данные считаются свежими 30 секунд
    refetchInterval: 60000, // автоматическое обновление каждую минуту
  });
}

React Query автоматически управляет кэшем, обновляет данные в фоне и предоставляет статусы загрузки. Это удобно для часто меняющихся данных.

Вывод

Выбор стратегии зависит от частоты изменений и критичности данных. Для простых случаев достаточно TTL, для сложных приложений лучше использовать специализированные библиотеки, которые упрощают синхронизацию и уменьшают количество ручного кода. Всегда учитывайте компромисс между свежестью данных и нагрузкой на сервер.