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 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, puedes hacer varias cosas para optimizar el almacenamiento en caché y 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 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 condiciones son verdaderas:

  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 anularlas si configuras el encabezado de forma manual en tu next.config.js archivo. 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

Angular SSR no establece directivas de control de caché explícitas de forma predeterminada. Puedes agregar las tuyas si especificas encabezados de control de caché en las rutas del 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 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 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 fuercen 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 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 el valor de SECONDS definido.
s-maxage=SECONDS N/A Una respuesta con la directiva s-maxage se almacena en caché hasta el valor de SECONDS definido. 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 se dispone a aceptar. Cloud CDN lo respeta y devuelve una respuesta almacenada 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.
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 no almacenado en caché

En la pestaña App Hosting > Usage de la consola Firebase, el gráfico "Cloud CDN - Outgoing Bandwidth" 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 caché.

También puedes ver la tasa de aciertos de caché para rutas específicas en tu app web con la supervisión basada en rutas.