Strategie di caching edge per le app React

L'header di risposta Cache-Control controlla per quanto tempo Cloudflare e gli altri CDN memorizzano nella cache le risposte SSR. Le direttive principali sono: max-age (cache del browser), s-maxage (durata della cache CDN/condivisa) e stale-while-revalidate (distribuzione di contenuti non aggiornati durante la rivalidazione in background).

s-maxage viene rispettato dalle cache condivise, come i CDN, mentre max-age è destinato alle cache dei browser. Per le pagine SSR, in genere si desiderano s-maxage=60 (il CDN memorizza la pagina per 60 secondi) e max-age=0 (il browser rivalida sempre), così tutti gli utenti ricevono contenuti ragionevolmente aggiornati dalla cache edge.

Aggiungere stale-while-revalidate=30 all'header Cache-Control indica a Cloudflare di distribuire immediatamente la pagina memorizzata nella cache mentre recupera in background una versione aggiornata. Gli utenti ricevono sempre una risposta rapida; la staleness massima è pari a s-maxage + stale-while-revalidate secondi.

Il contenuto personalizzato, basato sulla sessione dell'utente o sulla lingua, non deve essere distribuito dalla cache condivisa all'utente sbagliato. L'header Vary: Cookie indica a Cloudflare di trattare ogni valore univoco di Cookie come una voce separata della cache, impedendo che i dati di un utente vengano distribuiti a un altro.

Un modello comune consiste nel verificare la presenza di un cookie di sessione nel Worker prima di decidere se utilizzare la cache. Se è presente un cookie di sessione, si ignora completamente la cache e si esegue il rendering di una risposta personalizzata. Se non è presente alcun cookie di sessione, la pagina è pubblica e può essere distribuita dalla cache.

Cloudflare KV è un archivio chiave-valore distribuito globalmente, che memorizza i dati vicino agli utenti. È possibile memorizzare in KV l'HTML renderizzato: si salva la pagina renderizzata come valore con un TTL e le richieste successive leggono da KV sull'edge invece di eseguire nuovamente il rendering con React.

Le letture da KV sono rapide perché i dati vengono replicati nel PoP edge che gestisce la richiesta: la latenza tipica di lettura è inferiore a 5 ms. Le scritture in KV, invece, usano la consistenza eventuale: una scrittura in una regione viene propagata a tutti i PoP globali entro 60 secondi, quindi alcuni utenti potrebbero visualizzare brevemente dati non aggiornati.

Cloudflare R2 è un servizio di object storage compatibile con S3 e privo di costi di egress. È adatto agli asset più grandi che non entrano in KV: moduli WASM, immagini OG pre-renderizzate e grandi dataset JSON. I Workers accedono a R2 tramite binding, proprio come a KV.

Cloudflare Enterprise supporta i cache tag: si associa a una risposta il tag Cache-Tag: product-42 e, quando il prodotto 42 cambia, si chiama l'API di Cloudflare per eliminare tutte le risposte associate a product-42 dalla cache. In questo modo è possibile eseguire un'invalidazione mirata senza svuotare l'intera cache.

Quando si esegue il deploy di una nuova versione del Worker, l'HTML già memorizzato nella cache potrebbe fare riferimento ai nomi dei vecchi bundle JS. Una strategia robusta consiste nell'includere la versione del deploy nelle chiavi della cache oppure nell'utilizzare nomi di bundle versionati, tramite il content hashing di Vite, in modo che il vecchio HTML faccia sempre riferimento a file JS validi e memorizzati nella cache.

Un Worker che memorizza l'HTML SSR in KV segue questo schema: calcola una chiave della cache a partire dall'URL e, facoltativamente, dalla lingua; verifica la presenza di un valore in KV e, se lo trova, restituisce immediatamente l'HTML memorizzato. In caso di miss, esegue il rendering con React, salva il risultato in KV con un TTL e restituisce l'HTML appena renderizzato.

Quale modello di consistenza usa Cloudflare KV per le scritture?

Il caching edge per le applicazioni React combina diverse strategie: Cache-Control s-maxage per il caching CDN delle pagine pubbliche, Vary: Cookie per impedire la condivisione delle risposte personalizzate, KV per l'HTML renderizzato memorizzato nella cache edge e i cache tag per un'invalidazione granulare. Il modello di consistenza eventuale di KV implica che la propagazione delle scritture può richiedere fino a 60 secondi: progettate di conseguenza i TTL e la strategia di invalidazione.