Что и на каких уровнях можно кэшировать в frontend-приложении?

Уровни кэширования во frontend-приложении

Кэширование на стороне клиента — это ключевая техника для ускорения загрузки страниц и снижения нагрузки на сервер. Оно позволяет хранить копии ресурсов (HTML, CSS, JS, изображения, данные API) локально, чтобы при повторных запросах не загружать их заново. Рассмотрим основные уровни кэширования.

HTTP-кэш (Cache-Control, ETag)

Этот уровень управляется заголовками ответа сервера. Браузер автоматически сохраняет ответы в свой внутренний кэш и использует их до истечения срока действия. Пример настройки на сервере (Node.js/Express):

app.get('/api/data', (req, res) => {
  res.set('Cache-Control', 'public, max-age=3600');
  res.json({ data: 'some data' });
});

Здесь ресурс будет кэшироваться на 1 час. Для проверки актуальности используется ETag или Last-Modified.

Кэш Service Worker (Cache API)

Service Worker — это прокси-слой между браузером и сетью. Он может перехватывать запросы и возвращать закэшированные ответы, даже при отсутствии интернета. Пример кэширования статики:

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open('v1').then(cache => {
      return cache.addAll(['/index.html', '/style.css', '/app.js']);
    })
  );
});

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request).then(response => {
      return response || fetch(event.request);
    })
  );
});

Это позволяет приложению работать офлайн и ускоряет загрузку при слабом соединении.

Кэш на стороне приложения (localStorage, IndexedDB)

Для хранения данных приложения (например, пользовательские настройки, результаты API) используются Web Storage API или IndexedDB. Пример с localStorage:

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

// Чтение
const user = JSON.parse(localStorage.getItem('user'));

IndexedDB подходит для больших объёмов структурированных данных.

Кэш CDN

Content Delivery Network (CDN) кэширует статические ресурсы на географически распределённых серверах. Это не совсем клиентский кэш, но он влияет на время загрузки. Настройка обычно происходит на стороне CDN-провайдера.

Вывод: Кэширование во frontend-приложении следует применять для улучшения пользовательского опыта и снижения нагрузки на сервер. HTTP-кэш подходит для статики, Service Worker — для офлайн-режима и динамических данных, а localStorage/IndexedDB — для данных приложения. Выбор уровня зависит от конкретных требований к актуальности и объёму данных.