API-responsen cachen + webpagina cachen

U hebt waarschijnlijk vaak de ervaring gehad dat bij het teruggaan op een website, reeds geladen pagina's opnieuw worden geladen.

Bijvoorbeeld, wanneer u in een webshop op een product klikt in de zoekresultaten en vervolgens teruggaat,

wordt de zoekopdracht opnieuw uitgevoerd.

Het opnieuw laden van reeds geladen pagina's is niet alleen slecht voor de gebruikerservaring, maar vormt ook een groter systemisch probleem.

Door pagina's opnieuw te laden, worden onnodige API's aangeroepen en neemt het verkeer toe.

Dit kan leiden tot hogere kosten en, als er gegevens op die pagina worden verzameld, tot het probleem van overmatige gegevensverzameling.

Om dit op te lossen, kan caching van pagina's of API-resultaten zeer effectief zijn.

1. Gebruik van browseropslag (localStorage, SessionStorage, IndexedDB)

- localStorage behoudt gegevens zelfs nadat de browser is gesloten.

- sessionStorage verwijdert gegevens wanneer de browser of het tabblad wordt gesloten.

- IndexedDB wordt gebruikt voor het opslaan van grote hoeveelheden gegevens. Het kan asynchroon opslaan en is NoSql. Afbeeldingen en video's kunnen ook worden opgeslagen. De maximale capaciteit verschilt per browser, maar bedraagt ongeveer 50 MB. Het kan ook offline worden gebruikt.

2. Axios Interceptor

Als u axios gebruikt, kunt u de ingebouwde interceptors gebruiken. Voor dezelfde aanvraag wordt het antwoord geretourneerd zonder naar de server te verzenden.

Caching binnen het Nuxt framework

Door een component in de keep-alive tag te plaatsen, kan de component worden gecached.

U kunt instellen of fetch() tijdens server-side rendering moet worden aangeroepen. Als het false is, wordt fetch alleen aan de client-side aangeroepen.

Er is ook een manier om Vuex te gebruiken. Het principe is hetzelfde als browseropslag.

Gebruik een webserver (Nginx) om cache-instellingen in de antwoordheader op te nemen.

Houd er echter rekening mee dat caching kan leiden tot vertragingen bij het distribueren van resources zoals afbeeldingen. In dat geval moet de cache ongeldig worden gemaakt. U kunt de bestandsnaam wijzigen, een verzoek indienen om de cache ongeldig te maken, of, als u AWS CloudFront gebruikt, de cache ongeldig maken.

Er is ook een manier om de op de Nuxt-server gerenderde pagina zelf op te slaan in de geheugencache.

Dit is server-side caching, waarbij niet alleen de API, maar de hele pagina wordt gecached. Dit betekent dat de pagina direct wordt geladen wanneer u teruggaat. De prestaties zijn zeer hoog, maar u moet voorzichtig zijn met het gebruik van servergeheugen.

Als 10.000 gebruikers dezelfde pagina opvragen,

wordt de pagina gecached zodra de eerste gebruiker deze aanvraagt en wordt deze gerenderd.

Vervolgens, wanneer 9.999 gebruikers toegang krijgen tot dezelfde pagina, reageert de server met het gecachede resultaat.

-> Deze methode is niet geschikt als u gepersonaliseerde gegevens voor elke gebruiker moet weergeven.

+ Het cache-mechanisme gebruikt intern het lru-cache pakket.

* lru: een cachingalgoritme dat de data die het langst niet is gebruikt het eerst verwijdert.

Het gebruikt een hashmap of dubbel gelinkte lijst gegevensstructuur om snel key-value paren op te zoeken: O(1) tijdscomplexiteit.