Кеширование контента приложения

Cloud CDN – это важная часть поддержки вашего веб-приложения в App Hosting. Каждый запрос к вашему бэкенду сначала проходит через Cloud CDN. Контент, который уже кеширован в CDN, сразу же возвращается пользователю, минуя сервис Cloud Run, в котором выполняется серверный код вашего веб-приложения. Подробную информацию о преимуществах сетей доставки контента можно найти на сайте web.dev.

Базовую конфигурацию Cloud CDN задает App Hosting, и ее нельзя изменить. Однако вы можете оптимизировать кеширование, чтобы увеличить скорость загрузки страниц, уменьшить объем некешированного контента, за который взимается плата, и минимизировать трафик в Cloud Run.

Кешируемый контент

Cloud CDN сохраняет ответы в кеше, если выполняются все следующие условия:

  1. Запрос GET.

  2. Ответ имеет код статуса 200, 203, 204, 206, 300, 301, 302, 307, 308, 404, 405, 410, 421, 451 или 501.

  3. Ответ содержит заголовок Cache-Control с директивой max-age или s-maxage либо заголовок Expires с временной меткой в будущем.

  4. Ответ содержит заголовок Age или заголовок Cache-Control с явной директивой public.

  5. Размер ответа не превышает 10 МиБ.

и НИ ОДНО из следующих условий не выполняется:

  1. Ответ содержит заголовок Set-Cookie.

  2. В ответе есть заголовок Vary со значением, отличным от Accept, Accept-Encoding, Access-Control-Request-Headers, Access-Control-Request-Method, Origin, Sec-Fetch-Dest, Sec-Fetch-Mode, Sec-Fetch-Site, X-Goog-Allowed-Resources, X-Origin, RSC, Next-Router-State-Tree, Next-Router-Prefetch, Next-Router-Segment-Prefetch и Next-Url.

  3. Ответ содержит заголовок Cache-Control с директивой no-store или private.

  4. Запрос содержит заголовок Cache-Control с директивой no-store.

  5. В запросе есть заголовок Authorization, если в ответе нет явной директивы управления кешем.

Как настроить поведение с помощью директив управления кешем

Next.js;

Next.js неявно задает директивы управления кешем на основе ряда факторов. Однако вы можете переопределить их, вручную задав заголовок в файле next.config.js. Например, чтобы страница не кешировалась в Cloud CDN, используйте следующий код:

  /** @type {import('next').NextConfig} */
  const nextConfig = {
      headers: async () => [{
          source: "/YOUR_PRIVATE_PAGE",
          headers: [{
              key: "Cache-Control",
              value: "private"
          }],
      }],
  };

Angular

Angular SSR не задает явные директивы cache-control по умолчанию. Вы можете добавить собственные заголовки, указав заголовки cache-control в маршрутах сервера. Например, чтобы разрешить Cloud CDN кешировать все страницы на час, используйте следующий код:

import { RenderMode, ServerRoute } from '@angular/ssr';

export const serverRoutes: ServerRoute[] = [
  {
    path: '**',
    renderMode: RenderMode.Prerender,
    headers: {
      'Cache-Control': 'public, max-age=3600',
    }
  }
];

Чтобы запретить кеширование определенной страницы, выполните следующие действия:

import { RenderMode, ServerRoute } from '@angular/ssr';

export const serverRoutes: ServerRoute[] = [
  // ... other routes
  {
    path: 'YOUR_PRIVATE_PAGE',
    renderMode: RenderMode.Server,
    headers: {
      'Cache-Control': 'private',
    }
  }
];

Обязательные директивы

Экземпляр Cloud CDN в Firebase App Hosting учитывает следующие директивы управления кешем:

Директива Запрос Ответ
no-store Если этот заголовок присутствует в запросе, ответ не будет кешироваться. Ответ с заголовком no-store не кешируется.
no-cache Директива запроса no-cache игнорируется, чтобы клиенты не могли инициировать или принудительно запускать повторную проверку в источнике. Ответ с no-cache кешируется, но перед показом должен быть повторно проверен на источнике.
public Н/Д Эта директива не является обязательной для кеширования, но мы рекомендуем использовать ее для контента, который должен кешироваться прокси-серверами.
private Н/Д Ответ с директивой private не кешируется Cloud CDN, даже если он считается кешируемым. Клиенты (например, браузеры) могут кешировать результат. Используйте no-store, чтобы запретить кеширование ответов.
max-age=SECONDS Директива запроса max-age игнорируется. Возвращается кешированный ответ, как если бы этот заголовок не был включен в запрос. Ответ с директивой max-age кешируется на указанное количество секунд.
s-maxage=SECONDS Н/Д Ответ с директивой s-maxage кешируется на указанное количество секунд. Если присутствуют оба заголовка (max-age и s-maxage), Cloud CDN использует s‑maxage. Ответы с этой директивой не показываются устаревшими. s-max-age (два дефиса) не подходит для кеширования.
max-stale=SECONDS Директива запроса max-stale определяет максимальный срок устаревания (в секундах), который готов принять клиент. Cloud CDN учитывает это и возвращает устаревший кешированный ответ, только если его устаревание меньше, чем указано в директиве max-stale. В противном случае он повторно проверяет его перед обслуживанием запроса. Н/Д
stale-while-revalidate=SECONDS Н/Д Ответ с stale-while-revalidate отправляется клиенту в течение SECONDS, пока выполняется асинхронная повторная проверка.
must-revalidate Н/Д Ответ с директивой must-revalidate повторно проверяется на сервере-источнике после истечения срока действия. Ответы с этой директивой не показываются устаревшими.
proxy-revalidate Ответ с директивой proxy-revalidate повторно проверяется на сервере-источнике после истечения срока действия. Ответы с этой директивой не показываются устаревшими.
no-transform Н/Д Cloud CDN не применяет преобразования.

Как отслеживать кешированный и некешированный трафик

На вкладке App Hosting > Использование в консоли Firebase на графике "Cloud CDN – исходящая пропускная способность" показаны переданные кешированные и некешированные байты, а также есть отметка для каждого развертывания. С помощью этого графика можно оценить эффективность оптимизации кеша.

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