App-Inhalte im Cache speichern

Cloud CDN ist ein wichtiger Bestandteil der Unterstützung von App Hosting für Ihre Webanwendung. Jede Anfrage an Ihr Back-End wird zuerst über Cloud CDN geleitet. Inhalte, die bereits im CDN im Cache gespeichert sind, werden sofort an den Nutzer zurückgegeben. Der Cloud Run-Dienst, auf dem der Servercode Ihrer Webanwendung ausgeführt wird, wird dabei übersprungen. Weitere Informationen zu den allgemeinen Vorteilen von CDNs finden Sie auf web.dev.

Die grundlegende Cloud CDN-Konfiguration wird durch App Hosting festgelegt und kann nicht geändert werden. Es gibt jedoch eine Reihe von Maßnahmen, die Sie ergreifen können, um das Caching zu optimieren und so die Seitenladezeiten zu verkürzen, die Abrechnung von nicht im Cache gespeicherten Inhalten zu reduzieren und den Traffic zu Cloud Run zu minimieren.

Im Cache speicherbare Inhalte

Cloud CDN speichert Antworten im Cache, wenn ALLE der folgenden Bedingungen erfüllt sind:

1. Die Anfrage ist ein GET

2. Die Antwort hat den Statuscode 200, 203, 204, 206, 300, 301, 302, 307, 308, 404, 405, 410, 421, 451 oder 501.

3. Die Antwort hat einen Cache-Control-Header mit einer max-age- oder s-maxage-Anweisung oder einen Expires-Header mit einem Zeitstempel in der Zukunft.

4. Die Antwort hat einen Age-Header oder einen Cache-Control-Header mit einer expliziten public-Anweisung.

5. Die Antwort ist höchstens 10 MiB groß.

KEINE der folgenden Aussagen ist richtig:

1. Die Antwort hat einen Set-Cookie-Header

2. Die Antwort hat einen Vary-Header mit einem anderen Wert als 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 oder Next-Router-Segment-Prefetch.

3. Die Antwort hat einen Cache-Control-Header mit der Anweisung no-store oder private.

4. Die Anfrage hat einen Cache-Control-Header mit einer no-store-Anweisung.

5. Die Anfrage hat einen Authorization-Header, es sei denn, die Antwort hat eine explizite Cachesteuerungsanweisung.

Verhalten mit Cache-Control-Anweisungen anpassen

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

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',
    }
  }
];

Berücksichtigte Anweisungen

Die Cloud CDN-Instanz von Firebase App Hosting berücksichtigt die folgenden Cache-Steuerungsanweisungen:

Zwischengespeicherten und nicht zwischengespeicherten Traffic messen

Im Diagramm „Cloud CDN – Ausgehende Bandbreite“ auf dem Tab Nutzung der App Hosting-Konsole werden die bereitgestellten gecachten und ungecachten Bytes angezeigt. Außerdem ist für jeden Roll-out eine Markierung vorhanden. Anhand dieses Diagramms können Sie die Wirksamkeit Ihrer Cache-Optimierungsmaßnahmen messen.