App-Inhalte im Cache speichern

Mit Sammlungen den Überblick behalten Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.

Cloud CDN ist ein wichtiger Bestandteil der App Hosting-Unterstützung 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, sodass der Cloud Run-Dienst, in dem der Servercode Ihrer Webanwendung ausgeführt wird, nicht aufgerufen werden muss. Weitere Informationen zu den allgemeinen Vorteilen von CDNs finden Sie unter web.dev.

Die grundlegende Cloud CDN-Konfiguration wird von App Hosting festgelegt und kann nicht geändert werden. Es gibt jedoch eine Reihe von Möglichkeiten, das Caching zu optimieren, um die Seitenladezeit zu verkürzen, die Anzahl der in Rechnung gestellten nicht im Cache gespeicherten Inhalte 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 eine GET-Anfrage.

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 darf maximal 10 MiB groß sein.

und KEINE der folgenden Aussagen treffen zu:

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 enthält eine explizite Cache-Steuerungsanweisung.

Verhalten mit Cache-Kontrollanweisungen 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 Richtlinien

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

Traffic mit und ohne Cache messen

Im Diagramm „Cloud CDN – Ausgehende Bandbreite“ auf dem Tab Nutzung der App Hosting-Konsole werden gecachte und nicht gecachte Bytes angezeigt, die bereitgestellt wurden. Außerdem ist für jedes Roll-out eine Markierung zu sehen. Anhand dieses Diagramms können Sie die Wirksamkeit Ihrer Cache-Optimierung messen.