Memorizzare nella cache i contenuti dell'app

Cloud CDN è una parte fondamentale del supporto di App Hosting per la tua app web. Ogni richiesta al backend passa prima attraverso Cloud CDN. I contenuti già memorizzati nella cache della CDN vengono inviati immediatamente all'utente, evitando un viaggio 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, puoi fare diverse cose 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 archivia le risposte nella cache se TUTTE le seguenti condizioni sono vere:

  1. La richiesta è una 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 oppure un'intestazione Expires con un timestamp futuro.

  4. La risposta ha un'intestazione Age o un'intestazione 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 ha un'intestazione Cache-Control con una direttiva 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 della cache

Next.js

Next.js imposta implicitamente le direttive cache-control in base a una serie di fattori. Tuttavia, puoi ignorarle impostando manualmente l'intestazione nel tuo 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 pronte all'uso. Puoi aggiungerne di tuoi specificando le intestazioni cache-control nelle route 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',
    }
  }
];

Oppure, 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 della richiesta no-cache viene ignorata per impedire ai client di avviare o forzare potenzialmente la convalida all'origine. Una risposta con no-cache viene memorizzata nella cache, ma deve essere riconvalidata con l'origine prima di essere pubblicata.
public N/D Questa direttiva non è necessaria per la memorizzazione nella cache, ma è una best practice 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 è altrimenti considerata memorizzabile nella cache. I client (come 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 come obsolete. s-max-age (due trattini) non è valido ai fini della memorizzazione nella cache.
max-stale=SECONDS La direttiva di richiesta max-stale stabilisce la staleness massima (in secondi) che il client è disposto ad accettare. Cloud CDN rispetta questa direttiva e restituisce una risposta memorizzata nella cache obsoleta solo se l'obsolescenza della risposta è inferiore alla direttiva max-stale. In caso contrario, esegue una nuova convalida prima di elaborare 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 durante la convalida asincrona.
must-revalidate N/D Una risposta con must-revalidate viene convalidata nuovamente con il server di origine dopo la scadenza. Le risposte con questa direttiva non vengono pubblicate come obsolete.
proxy-revalidate Una risposta con proxy-revalidate viene convalidata nuovamente con il server di origine dopo la scadenza. Le risposte con questa direttiva non vengono pubblicate come obsolete.
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 console App Hosting mostra i byte memorizzati nella cache e non memorizzati nella cache e ha un segno per ogni implementazione. Puoi utilizzare questo grafico per misurare l'efficacia dei tuoi sforzi di ottimizzazione della cache.