Memorizzare nella cache i contenuti dell'app

Cloud CDN è un componente fondamentale dell'assistenza di App Hosting per la tua app web. Ogni richiesta al tuo backend passa prima da Cloud CDN. I contenuti già memorizzati nella cache della CDN vengono immediatamente restituiti all'utente, evitando un passaggio al servizio Cloud Run che esegue il codice server della tua app web. Puoi scoprire di più sui vantaggi generali delle CDN su web.dev.

Sebbene la configurazione di base di Cloud CDN sia impostata da App Hosting e non possa essere modificata, esistono diversi modi per ottimizzare la memorizzazione nella cache al fine di aumentare la velocità di caricamento delle pagine, ridurre i contenuti non memorizzati nella cache fatturati e ridurre al minimo il traffico verso Cloud Run.

Contenuti memorizzabili nella cache

Cloud CDN memorizza le risposte nella cache se TUTTE le seguenti condizioni sono vere:

  1. La richiesta è GET

  2. La risposta ha un codice di stato 200, 203, 204, 206, 300, 301, 302, 307, 308, 404, 405, 410, 421, 451 o 501.

  3. La risposta ha un'intestazione Cache-Control con una direttiva max-age o s-maxage o un'intestazione Expires con un timestamp futuro.

  4. La risposta ha un'intestazione Age o Cache-Control con un'istruzione public esplicita.

  5. La risposta ha dimensioni inferiori o uguali a 10 MiB.

e NESSUNO dei seguenti punti è vero:

  1. La risposta ha un'intestazione Set-Cookie

  2. La risposta ha un'intestazione Vary con un valore diverso da 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 risposta ha un'intestazione Cache-Control con la direttiva no-store o private.

  4. La richiesta contiene un'intestazione Cache-Control con un'istruzione no-store.

  5. La richiesta ha un'intestazione Authorization, a meno che la risposta non abbia un'istruzione di controllo della cache esplicita.

Personalizzare il comportamento con le direttive di controllo cache

Next.js

Next.js imposta le direttive cache-control in modo implicito in base a una serie di fattori. Tuttavia, puoi ignorarli impostando manualmente l'intestazione nel file next.config.js. Ad esempio, per assicurarti che una pagina non venga memorizzata nella cache in Cloud CDN:

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

Angular

Angular SSR non imposta direttive cache-control esplicite al momento dell'uso. Puoi aggiungerne di tue specificando le intestazioni cache-control nei percorsi del server. Ad esempio, per consentire a Cloud CDN di memorizzare nella cache tutte le pagine per un'ora:

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

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

In alternativa, per assicurarti che una pagina specifica non venga memorizzata nella cache:

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

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

Direttive rispettate

L'istanza Cloud CDN di Firebase App Hosting rispetta le seguenti direttive di controllo della cache:

Direttiva Richiesta Risposta
no-store Se presente in una richiesta, la risposta non verrà memorizzata nella cache. Una risposta con no-store non viene memorizzata nella cache.
no-cache La direttiva di richiesta no-cache viene ignorata per impedire ai client di avviare o forzare potenzialmente la convalida dell'origine. Una risposta con no-cache viene memorizzata nella cache, ma deve essere convalidata di nuovo con l'origine prima di essere pubblicata.
public N/D Questa direttiva non è obbligatoria per la memorizzazione nella cache, ma è buona norma includerla per i contenuti che devono essere memorizzati nella cache dai proxy.
private N/D Una risposta con la direttiva private non viene memorizzata nella cache da Cloud CDN, anche se la risposta è considerata memorizzabile nella cache. I client (ad esempio i browser) potrebbero comunque memorizzare nella cache il risultato. Utilizza no-store per impedire la memorizzazione nella cache di tutte le risposte.
max-age=SECONDS L'istruzione di richiesta max-age viene ignorata. Viene restituita una risposta memorizzata nella cache come se questa intestazione non fosse inclusa nella richiesta. Una risposta con la direttiva max-age viene memorizzata nella cache fino al numero di SECONDI definito.
s-maxage=SECONDS N/D Una risposta con la direttiva s-maxage viene memorizzata nella cache fino al numero di SECONDI definito. Se sono presenti sia max-age che s-maxage, Cloud CDN utilizza s‑maxage. Le risposte con questa direttiva non vengono pubblicate in modo obsoleto. s-max-age (due trattini) non è valido ai fini della memorizzazione nella cache.
max-stale=SECONDS La direttiva di richiesta max-stale indica la data di aggiornamento massima (in secondi) che il client è disposto ad accettare. Cloud CDN rispetta questa impostazione e restituisce una risposta memorizzata nella cache non aggiornata solo se la non attualità della risposta è inferiore alla direttiva max-stale. In caso contrario, la convalida viene ripetuta prima di soddisfare la richiesta. N/D
stale-while-revalidate=SECONDS N/D Una risposta con stale-while-revalidate viene inviata a un client per un massimo di SECONDI mentre la convalida viene eseguita in modo asincrono.
must-revalidate N/D Una risposta con must-revalidate viene convalidata di nuovo con il server di origine dopo la scadenza. Le risposte con questa direttiva non vengono pubblicate in modo obsoleto.
proxy-revalidate Una risposta con proxy-revalidate viene convalidata di nuovo con il server di origine dopo la scadenza. Le risposte con questa direttiva non vengono pubblicate in modo obsoleto.
no-transform N/D Cloud CDN non applica trasformazioni.

Misurare il traffico memorizzato nella cache e non memorizzato nella cache

Il grafico "Cloud CDN - larghezza di banda in uscita" nella scheda Utilizzo della consoleApp Hosting mostra i byte memorizzati nella cache e non memorizzati nella cache e presenta un segno per ogni implementazione. Puoi utilizzare questo grafico per misurare l'efficacia delle tue attività di ottimizzazione della cache.