Almacena en caché el contenido de la app

Cloud CDN es una parte fundamental de la compatibilidad de App Hosting con tu app web. Cada solicitud a tu backend pasa primero por Cloud CDN. El contenido que ya está almacenado en caché en la CDN se vuelve a entregar al usuario de inmediato, lo que omite 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.

Aunque App Hosting establece la configuración básica de Cloud CDN y no se puede modificar, hay varias medidas que puedes tomar para optimizar el almacenamiento en caché con el fin de aumentar las velocidades de carga de la página, 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 una GET

  2. La respuesta tiene un código de estado de 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 control de caché de forma implícita en función de varios factores. Sin embargo, puedes configurar el encabezado de forma manual en el archivo next.config.js para anularlos. 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 de control de caché explícitas de forma predeterminada. Puedes agregar los tuyos propios especificando encabezados de control de caché en las rutas de tu servidor. Por ejemplo, para permitir que Cloud CDN almacenen 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 almacena en 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 almacenamiento 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 los SEGUNDOS definidos.
s-maxage=SECONDS N/A Una respuesta con la directiva s-maxage se almacena en caché hasta los SEGUNDOS definidos. 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 SECONDS 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.

Mide el tráfico almacenado en caché y 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 no almacenados en caché que se entregaron, 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é.