Кэшировать содержимое приложения

Cloud CDN — это важнейшая часть поддержки App Hosting для вашего веб-приложения. Каждый запрос к вашему бэкэнду сначала проходит через Cloud CDN. Контент, который уже кэширован в CDN, немедленно возвращается пользователю, минуя обращение к службе Cloud Run, которая запускает серверный код вашего веб-приложения. Вы можете узнать больше об общих преимуществах CDN на 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 .

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

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

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

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

Следующий.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 SSR не устанавливает явные директивы управления кэшем из коробки. Вы можете добавить свои собственные, указав заголовки управления кэшем в маршрутах сервера. Например, чтобы разрешить 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 кэшируется до указанного значения SECONDS. Если присутствуют и 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 передается клиенту в течение СЕКУНД, в то время как повторная проверка выполняется асинхронно.
must-revalidate Н/Д Ответ с must-revalidate повторно проверяется исходным сервером после истечения срока его действия. Ответы с этой директивой не обслуживаются устаревшими.
proxy-revalidate Ответ с proxy-revalidate повторно проверяется исходным сервером после истечения срока его действия. Ответы с этой директивой не обслуживаются устаревшими.
no-transform Н/Д Cloud CDN не применяет никаких преобразований.

Измерение кэшированного и некэшированного трафика

График «Cloud CDN — Исходящая пропускная способность» на вкладке «Использование» консоли App Hosting показывает количество кэшированных и некэшированных байтов, а также имеет отметку для каждого развертывания. Вы можете использовать этот график для измерения эффективности усилий по оптимизации кэша.