API válaszok gyorsítótárazása + weboldal gyorsítótárazás

Sokan tapasztalták már, hogy a weboldalon a Vissza gomb megnyomása után újra betöltődik a már korábban betöltött oldal.

Például egy online áruházban, ha egy termék keresési eredményére kattintunk, majd a Vissza gombra kattintunk,

újrakeresés történik.

A már betöltött oldal újbóli betöltése nemcsak a felhasználói élményt rontja, de rendszerszinten is nagyobb problémákat okozhat.

Az oldal újratöltése felesleges API hívásokat generál, és növeli a forgalmat.

Költségnövekedést is okozhat, és ha az adott oldalon adatgyűjtés történik, akkor bizonyos adatok túlzott gyűjtéséhez is vezethet.

Ennek a probléma megoldására az oldal vagy az API eredményének gyorsítótárazása jelentős hatékonyságnövelést eredményezhet.

1. A böngésző tárolóterének használata (localStorage, SessionStorage, IndexedDB)

- A localStorage adatai a böngésző bezárása után is megmaradnak.

- A sessionStorage adatai a böngésző vagy a fül bezárásakor törlődnek.

- Az IndexedDB nagy adathalmazok tárolására szolgál. Aszinkron módon tárolható, NoSql adatbázis. Képeket és videókat is tárolhat. A maximális kapacitás böngészőfüggő, de kb. 50 MB körül van. Offline is használható.

2. Axios Interceptor

Ha az axiost használjuk, akkor beépített funkcióként használhatjuk az interceptoreket. Ugyanarra a kérésre válaszol anélkül, hogy a szerverre küldené.

Gyorsítótárazás Nuxt keretrendszerben

Egy komponens a keep-alive címkével való körülvételével gyorsítótárazható.

Beállítható, hogy a szerveroldali renderelés során meghívja-e a fetch() függvényt. Ha false, akkor csak a kliens oldalon hívódik meg a fetch.

Létezik a Vuex használatának lehetősége is. A működési elv hasonló a böngésző tárolójához.

A webkiszolgáló (Nginx) segítségével gyorsítótár-beállítások adhatók hozzá a válasz fejlécéhez.

Fontos azonban, hogy a gyorsítótár miatt a képek és egyéb erőforrások közzététele nem biztos, hogy azonnal megtörténik, ilyen esetekben a gyorsítótárat érvényteleníteni kell. A fájlnevek megváltoztatásával, érvénytelenítő kérések küldésével vagy az AWS CloudFront használatával érhető el a gyorsítótár érvénytelenítés.

A Nuxt szerveren renderelt oldalak menthetők a memóriagyorsítótárba is.

Szerveroldali gyorsítótárazásról van szó, amely nem csak az API-kat, hanem az egész oldalt is gyorsítótárazza. Ez azt jelenti, hogy a Vissza gombra kattintva az oldal azonnal betöltődik. A teljesítmény kiváló, de a szerver memóriáját használja, ezért óvatosan kell eljárni.

Ha 10 000 felhasználó kéri ugyanazt az oldalt,

az első felhasználó kérésekor az oldal renderelődik, és gyorsítótárba kerül.

A további 9999 felhasználó ugyanarra az oldalra való hozzáférés esetén a szerver a gyorsítótárból küldi vissza a választ.

-> Ha felhasználónként személyre szabott adatokat kell megjeleníteni, akkor ez a módszer nem ideális.

+ A cache belsőleg az lru-cache csomagot használja.

* lru: Az a gyorsítótárazási algoritmus, amely a legkevésbé használt adatokat távolítja el először.

Használ hash map vagy duplán összefűzött lista adatszerkezetet a kulcs-érték párok gyors megtalálásához: O(1) időkomplexitás