Workbox с серверным рендерингом

Workbox — это набор библиотек и инструментов для управления кэшированием и стратегиями работы с ресурсами в браузере. При использовании серверного рендеринга (SSR) в JavaScript-приложениях его функции становятся особенно важными, так как необходимо учитывать динамически сгенерированные HTML-страницы наряду со статическими ассетами.

Кэширование HTML при SSR

В отличие от SPA, где HTML практически всегда одинаковый, при SSR каждая HTML-страница может быть уникальной для конкретного запроса. Для таких случаев Workbox предоставляет стратегию NetworkFirst. Она сначала пытается загрузить свежую версию страницы с сервера, а в случае ошибки или недоступности сети возвращает кэшированную версию:

workbox.routing.registerRoute(
  ({ request }) => request.mode === 'navigate',
  new workbox.strategies.NetworkFirst({
    cacheName: 'html-cache',
    plugins: [
      new workbox.expiration.ExpirationPlugin({
        maxEntries: 50,
        maxAgeSeconds: 3600,
      }),
    ],
  })
);

Ключевые моменты:

  • request.mode === 'navigate' позволяет обрабатывать именно HTML-запросы при навигации.
  • NetworkFirst обеспечивает свежесть данных, что критично для SSR.
  • Плагин ExpirationPlugin предотвращает бесконтрольный рост кэша.

Кэширование статических ресурсов

JS-бандлы, CSS, изображения и шрифты кэшируются с помощью стратегии CacheFirst с длительным сроком хранения, так как они редко изменяются. Это уменьшает количество сетевых запросов и ускоряет рендеринг:

workbox.routing.registerRoute(
  ({ request }) => request.destination === 'script' || request.destination === 'style',
  new workbox.strategies.CacheFirst({
    cacheName: 'static-resources',
    plugins: [
      new workbox.expiration.ExpirationPlugin({
        maxEntries: 100,
        maxAgeSeconds: 30 * 24 * 60 * 60, // 30 дней
      }),
      new workbox.cacheableResponse.CacheableResponsePlugin({
        statuses: [0, 200],
      }),
    ],
  })
);

Особенности:

  • Использование CacheableResponsePlugin позволяет кэшировать только успешные ответы.
  • Долгий срок хранения статических ресурсов снижает нагрузку на сервер.

Интеграция с динамическими API

SSR-приложения часто делают запросы к API для генерации данных на странице. Для таких запросов применяются стратегии StaleWhileRevalidate или NetworkFirst в зависимости от требований к свежести данных:

workbox.routing.registerRoute(
  ({ url }) => url.pathname.startsWith('/api/'),
  new workbox.strategies.StaleWhileRevalidate({
    cacheName: 'api-cache',
    plugins: [
      new workbox.expiration.ExpirationPlugin({
        maxEntries: 50,
        maxAgeSeconds: 5 * 60, // 5 минут
      }),
    ],
  })
);

Пояснения:

  • StaleWhileRevalidate возвращает кэшированную версию мгновенно, а затем обновляет кэш в фоне.
  • Подходит для данных, которые можно слегка устаревшими при загрузке страницы, но важно обновлять их регулярно.

Предзагрузка страниц и ресурсов

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

workbox.precaching.precacheAndRoute([
  { url: '/', revision: '1234' },
  { url: '/about', revision: '5678' },
  { url: '/main.js', revision: 'abcd' },
]);

Рекомендации:

  • revision необходим для обновления кэша при изменении контента.
  • Предзагрузка ключевых HTML-страниц ускоряет первую загрузку приложения даже без сети.

Обработка обновлений кэша

Для SSR важно корректно управлять обновлением HTML-кэша, чтобы пользователи всегда видели актуальный контент. Workbox предоставляет события, позволяющие отслеживать установку нового сервис-воркера и применять его обновления:

self.addEventListener('message', (event) => {
  if (event.data && event.data.type === 'SKIP_WAITING') {
    self.skipWaiting();
  }
});

Это позволяет немедленно активировать новую версию воркера и очистить устаревшие данные.

Логирование и отладка

Workbox включает встроенные возможности логирования, что помогает проверять, какие ресурсы кэшируются, а какие запрашиваются с сети:

workbox.setConfig({ debug: true });

Советы по применению:

  • В продакшене стоит отключать режим отладки.
  • Логирование особенно полезно при тестировании SSR, чтобы убедиться, что HTML и API-кэширование работают корректно.

Комбинирование стратегий

SSR-приложения выигрывают от комбинирования разных стратегий в зависимости от типа ресурса:

  • HTML: NetworkFirst
  • API: StaleWhileRevalidate или NetworkFirst
  • JS/CSS/Изображения: CacheFirst

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

Работа с Workbox в контексте серверного рендеринга требует точного понимания структуры приложения и характера данных, что обеспечивает баланс между производительностью и актуальностью информации.

Оглавление