Come effettuare il caching delle risposte API + caching delle pagine web

Avrai sicuramente avuto spesso l'esperienza di ricaricare una pagina già caricata quando fai clic su "Indietro" sul sito web.

Ad esempio, in un negozio online, dopo aver cliccato su un prodotto visualizzato nei risultati di ricerca, quando fai clic su "Indietro",

viene eseguita una nuova ricerca.

Poiché è necessario ricaricare la pagina già caricata, questo non è solo negativo per l'esperienza utente, ma rappresenta un problema ancora maggiore a livello di sistema.

Ricaricando la pagina, vengono effettuate chiamate API non necessarie e aumenta il traffico.

Possono sorgere problemi di costi e, se si stanno raccogliendo dati da quella pagina, esiste anche il problema della raccolta eccessiva di dati specifici.

Per risolvere questo problema, è possibile ottenere grandi risultati mettendo in cache le pagine o i risultati dell'API.

1. Utilizzo dello spazio di archiviazione del browser (localStorage, SessionStorage, IndexedDB)

- localStorage mantiene i dati anche dopo la chiusura del browser.

- sessionStorage elimina i dati quando il browser o la scheda vengono chiusi.

- IndexedDB viene utilizzato per memorizzare grandi quantità di dati. Può essere memorizzato in modo asincrono ed è NoSql. È possibile memorizzare anche immagini e video. La capacità massima varia a seconda del browser, ma è di circa 50 MB. Può essere utilizzato anche offline.

2. Axios Interceptor

Se si utilizza axios, è possibile utilizzare l'interceptor come funzione integrata. Per la stessa richiesta, restituisce la risposta senza inviare al server.

Memorizzazione nella cache all'interno del framework Nuxt

Avvolgendo un componente con il tag keep-alive, è possibile memorizzare nella cache il componente.

È possibile impostare se chiamare fetch() durante il rendering lato server. Se è false, fetch viene chiamato solo sul lato client.

Esiste anche il modo di utilizzare Vuex. Il principio è lo stesso dello storage del browser.

È possibile utilizzare il web server (Nginx) per inserire le impostazioni della cache nell'header di risposta.

Tuttavia, a causa della cache, potrebbe non essere possibile applicare immediatamente la distribuzione di risorse come le immagini, quindi in tal caso è necessario invalidare la cache. È possibile cambiare il nome del file, inserire una richiesta per invalidare la cache o, se si utilizza AWS CloudFront, è possibile applicare l'invalidazione della cache.

Esiste anche un modo per memorizzare nella cache la pagina stessa resa dal server Nuxt nella cache di memoria.

È la memorizzazione nella cache lato server e non solo l'API, ma l'intera pagina viene memorizzata nella cache. In altre parole, viene caricata immediatamente senza alcun ritardo quando si fa clic su "Indietro". Le prestazioni sono molto elevate, ma è necessario prestare attenzione perché utilizza la memoria del server.

Se 10.000 utenti richiedono la stessa pagina,

Quando il primo utente effettua una richiesta, la pagina viene resa nella cache dopo il rendering.

Successivamente, quando altri 9.999 utenti accedono alla stessa pagina, il server risponde con il risultato memorizzato nella cache.

-> Questo metodo non è buono se è necessario fornire dati personalizzati per ogni utente.

+ cache utilizza internamente il pacchetto lru-cache.

* lru: è un algoritmo di memorizzazione nella cache che elimina prima i dati meno utilizzati di recente.

Utilizza strutture dati di hash map o liste doppiamente collegate per trovare rapidamente coppie chiave-valore: complessità temporale O(1)