Almacena en caché el contenido de la app

Cloud CDN es una parte fundamental de la compatibilidad de App Hosting con tu app web. Todas las solicitudes a tu backend primero pasan por Cloud CDN. El contenido que ya está almacenado en caché en la CDN se entrega de inmediato al usuario, lo que evita un viaje al servicio de Cloud Run que ejecuta el código del servidor de tu app web. Puedes obtener más información sobre los beneficios generales de las CDN en web.dev.

Si bien App Hosting establece la configuración básica de Cloud CDN y no se puede modificar, hay varias acciones que puedes realizar para optimizar el almacenamiento en caché y, así, aumentar la velocidad de carga de las páginas, reducir el contenido no almacenado en caché facturado y minimizar el tráfico a Cloud Run.

Contenido que se puede almacenar en caché

Cloud CDN almacena las respuestas en caché si se cumplen TODAS las siguientes condiciones:

  1. La solicitud es un GET

  2. La respuesta tiene un código de estado 200, 203, 204, 206, 300, 301, 302, 307, 308, 404, 405, 410, 421, 451 o 501.

  3. La respuesta tiene un encabezado Cache-Control con una directiva max-age o s-maxage, o un encabezado Expires con una marca de tiempo en el futuro.

  4. La respuesta tiene un encabezado Age o un encabezado Cache-Control con una directiva public explícita.

  5. La respuesta tiene un tamaño menor o igual que 10 MiB.

y NINGUNA de las siguientes afirmaciones es verdadera:

  1. La respuesta tiene un encabezado Set-Cookie

  2. La respuesta tiene un encabezado Vary con un valor distinto de 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 o Next-Router-Segment-Prefetch.

  3. La respuesta tiene un encabezado Cache-Control con la directiva no-store o private.

  4. La solicitud tiene un encabezado Cache-Control con una directiva no-store.

  5. La solicitud tiene un encabezado Authorization, a menos que la respuesta tenga una directiva de control de caché explícita.

Personaliza el comportamiento con directivas de control de caché

Next.js

Next.js establece directivas de cache-control de forma implícita en función de varios factores. Sin embargo, puedes anularlos configurando el encabezado de forma manual en tu archivo next.config.js. Por ejemplo, para asegurarte de que una página no se almacene en caché en Cloud CDN, haz lo siguiente:

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

Angular

El SSR de Angular no establece directivas explícitas de cache-control de forma predeterminada. También puedes agregar los tuyos especificando encabezados cache-control en las rutas de tu servidor. Por ejemplo, para permitir que Cloud CDN almacene en caché todas las páginas durante una hora, haz lo siguiente:

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

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

O bien, para asegurarte de que una página específica no se almacene en caché, haz lo siguiente:

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

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

Directivas respetadas

La instancia de Cloud CDN de Firebase App Hosting respeta las siguientes directivas de control de caché:

Directiva Solicitud Respuesta
no-store Cuando está presente en una solicitud, la respuesta no se almacenará en la caché. Una respuesta con no-store no se almacena en caché.
no-cache La directiva de solicitud no-cache se ignora para evitar que los clientes inicien o forzar una revalidación al origen. Una respuesta con no-cache se almacena en caché, pero se debe volver a validar con el origen antes de la entrega.
public N/A Esta directiva no es necesaria para la capacidad de almacenamiento en caché, pero se recomienda incluirla en el caso del contenido que los proxies deben almacenar en caché.
private N/A Cloud CDN no almacena en caché una respuesta con la directiva private, incluso si la respuesta se considera almacenable en caché. Los clientes (como los navegadores) aún pueden almacenar en caché el resultado. Usa no-store para evitar todo el almacenamiento en caché de las respuestas.
max-age=SECONDS Se ignora la directiva de solicitud max-age. Se muestra una respuesta en caché como si este encabezado no se incluyera en la solicitud. Una respuesta con la directiva max-age se almacena en caché hasta la cantidad de segundos definida.
s-maxage=SECONDS N/A Una respuesta con la directiva s-maxage se almacena en caché hasta la cantidad de segundos definida. Si max-age y s-maxage están presentes, Cloud CDN usa s‑maxage. Las respuestas con esta directiva no se entregan inactivas. s-max-age (dos guiones) no es válido para el almacenamiento en caché.
max-stale=SECONDS La directiva de solicitud max-stale dicta la inactividad máxima (en segundos) que el cliente está dispuesto a aceptar. Cloud CDN lo respeta y muestra una respuesta en caché inactiva solo si la inactividad de la respuesta es menor que la directiva max-stale. De lo contrario, se vuelve a validar antes de entregar la solicitud. N/A
stale-while-revalidate=SECONDS N/A Una respuesta con stale-while-revalidate se entrega a un cliente hasta por SEGUNDOS mientras se realiza la revalidación de forma asíncrona.
must-revalidate N/A Una respuesta con must-revalidate se vuelve a validar con el servidor de origen después de su vencimiento. Las respuestas con esta directiva no se entregan inactivas.
proxy-revalidate Una respuesta con proxy-revalidate se vuelve a validar con el servidor de origen después de su vencimiento. Las respuestas con esta directiva no se entregan inactivas.
no-transform N/A Cloud CDN no aplica ninguna transformación.

Cómo medir el tráfico almacenado en caché y el tráfico sin almacenar en caché

El gráfico "Cloud CDN - Ancho de banda saliente" en la pestaña Uso de la consola de App Hosting muestra los bytes almacenados en caché y los que no se almacenaron en caché que se publicaron, y tiene una marca para cada lanzamiento. Puedes usar este gráfico para medir la eficacia de tus esfuerzos de optimización de la caché.