Как настраивать кеширование?

Стратегии кеширования в веб-приложениях

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

Типы кеширования

1. HTTP кеширование

Управляется заголовками, которые говорят браузеру, как долго хранить ресурсы:

// Пример: кеширование статических активов на 1 год
// Cache-Control: public, max-age=31536000, immutable

// А для динамического контента: 1 час
// Cache-Control: public, max-age=3600, must-revalidate

В Next.js это настраивается через метаданные или fetch options:

// Кеширование fetch запроса на 60 секунд
fetch("https://api.example.com/data", {
  next: { revalidate: 60 }
})

// Отключение кеширования
fetch("https://api.example.com/data", {
  cache: "no-store"
})

2. В памяти приложения (Runtime caching)

Хранение данных в памяти JavaScript для быстрого доступа:

// Простой паттерн кеша
class CacheManager {
  constructor(ttl = 5 * 60 * 1000) { // 5 минут
    this.cache = new Map();
    this.ttl = ttl;
  }

  set(key, value) {
    const expiresAt = Date.now() + this.ttl;
    this.cache.set(key, { value, expiresAt });
  }

  get(key) {
    const item = this.cache.get(key);
    if (!item) return null;
    
    if (Date.now() > item.expiresAt) {
      this.cache.delete(key);
      return null;
    }
    
    return item.value;
  }
}

// Использование
const cache = new CacheManager();
cache.set("user:123", { name: "John", age: 30 });
console.log(cache.get("user:123")); // { name: "John", age: 30 }

3. localStorage и sessionStorage

Персистентное хранилище на стороне клиента:

// Сохранение с TTL
function setWithTTL(key, value, ttl) {
  const item = {
    value: value,
    expiresAt: Date.now() + ttl
  };
  localStorage.setItem(key, JSON.stringify(item));
}

function getWithTTL(key) {
  const stored = localStorage.getItem(key);
  if (!stored) return null;
  
  const item = JSON.parse(stored);
  if (Date.now() > item.expiresAt) {
    localStorage.removeItem(key);
    return null;
  }
  
  return item.value;
}

// sessionStorage для временных данных сессии
sessionStorage.setItem("temp_filter", JSON.stringify(filters));

4. Service Worker и IndexedDB

Для сложного офлайн кеширования:

// Регистрация Service Worker
if ("serviceWorker" in navigator) {
  navigator.serviceWorker.register("/sw.js");
}

// В Service Worker
self.addEventListener("fetch", (event) => {
  event.respondWith(
    caches.match(event.request)
      .then(response => {
        return response || fetch(event.request)
          .then(response => {
            // Кеширование успешного ответа
            const cloned = response.clone();
            caches.open("v1").then(cache => {
              cache.put(event.request, cloned);
            });
            return response;
          });
      })
  );
});

Best Practices

1. Кешируй с умом - не всё нужно кешировать. Фокусируйся на дорогих операциях
2. Управляй инвалидацией - имей стратегию, когда кеш становится устаревшим
3. Мониторь размер - избегай утечек памяти в runtime кеше
4. Используй правильные заголовки - не полагайся только на браузерное кеширование

Кеширование - это баланс между производительностью и актуальностью данных.