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 tuo backend passa prima attraverso Cloud CDN. I contenuti già memorizzati nella cache della CDN vengono restituiti immediatamente all'utente, saltando 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 diverse azioni che puoi intraprendere per ottimizzare la memorizzazione nella cache, 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 sono soddisfatte TUTTE le seguenti condizioni:

  1. La richiesta è un 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 un'istruzione 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 una dimensione inferiore o uguale 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, Next-Router-Segment-Prefetch o Next-Url.

  3. La risposta ha un'intestazione Cache-Control con l'istruzione no-store o private.

  4. La richiesta ha 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.

Personalizza il comportamento con le istruzioni di controllo cache

Next.js

Next.js imposta le istruzioni di controllo della cache in modo implicito in base a una serie di fattori. Tuttavia, puoi eseguire l'override di queste impostazioni impostando manualmente l'intestazione nel file next.config.js. Ad esempio, per assicurarti che una pagina non venga memorizzata nella cache di Cloud CDN:

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

Angular

L'SSR di Angular non imposta istruzioni di controllo cache esplicite per impostazione predefinita. Puoi aggiungere le 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',
    }
  }
];

Istruzioni rispettate

L'istanza Cloud CDN di Firebase App Hosting rispetta le seguenti istruzioni di controllo 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 L'istruzione della richiesta no-cache viene ignorata per impedire ai client di essere in grado di avviare o forzare la riconvalida sull'origine. Una risposta con no-cache viene memorizzata nella cache, ma deve essere riconvalidata con l'origine prima di essere fornita.
public N/D Quest'istruzione 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 l'istruzione 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 completamente la memorizzazione nella cache delle risposte.
max-age=SECONDS L'istruzione max-age della richiesta viene ignorata. Una risposta memorizzata nella cache viene restituita come se questa intestazione non fosse inclusa nella richiesta. Una risposta con l'istruzione max-age viene memorizzata nella cache fino al valore di SECONDS definito.
s-maxage=SECONDS N/D Una risposta con l'istruzione s-maxage viene memorizzata nella cache fino al valore di SECONDS definito. Se sono presenti sia max-age che s-maxage, Cloud CDN utilizza s‑maxage. Le risposte con questa istruzione non vengono fornite se scadute. s-max-age (due trattini) non è valido ai fini della memorizzazione nella cache.
max-stale=SECONDS L'istruzione max-stale della richiesta stabilisce il valore di mancato aggiornamento massimo (in secondi) che il client è disposto ad accettare. Cloud CDN rispetta questa istruzione e restituisce una risposta memorizzata nella cache scaduta solo se il tempo di mancato aggiornamento della risposta è inferiore all'istruzione max-stale. In caso contrario, ripete la 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 SECONDS mentre la riconvalida viene eseguita in modo asincrono.
must-revalidate N/D Una risposta con must-revalidate viene riconvalidata con il server di origine dopo la scadenza. Le risposte con questa istruzione non vengono fornite se scadute.
proxy-revalidate Una risposta con proxy-revalidate viene riconvalidata con il server di origine dopo la scadenza. Le risposte con questa istruzione non vengono fornite se scadute.
no-transform N/D Cloud CDN non applica trasformazioni.

Misura il traffico memorizzato e non memorizzato nella cache

Nella scheda App Hosting > Utilizzo della console Firebase, il grafico "Cloud CDN - larghezza di banda in uscita" mostra i byte memorizzati nella cache e non memorizzati nella cache erogati, con un contrassegno per ogni rilascio. Puoi utilizzare questo grafico per misurare l'efficacia delle tue attività di ottimizzazione della cache.

Puoi anche visualizzare la percentuale di successi della cache per route specifiche nella tua app web con il monitoraggio basato sulle route.