API-Antworten cachen + Webseiten-Caching

Sie kennen das sicherlich: Wenn man auf einer Website auf "Zurück" klickt, wird die bereits geladene Seite erneut geladen.

Beispielsweise, wenn man in einem Onlineshop ein Produkt aus den Suchergebnissen anklickt und dann auf "Zurück" klickt,

wird die Suche erneut durchgeführt.

Das erneute Laden bereits geladener Seiten ist nicht nur schlecht für die Benutzererfahrung (UX), sondern stellt auch ein größeres systemisches Problem dar.

Durch das erneute Laden der Seite werden unnötige APIs aufgerufen und der Traffic erhöht.

Dies kann zu Kostenproblemen führen, und wenn auf der Seite Daten gesammelt werden, besteht die Gefahr einer Übererfassung bestimmter Daten.

Um dies zu beheben, kann das Caching von Seiten- oder API-Ergebnissen große Vorteile bringen.

1. Verwendung des Browser-Speichers (localStorage, SessionStorage, IndexedDB)

- localStorage behält die Daten auch nach dem Schließen des Browsers.

- sessionStorage löscht die Daten, wenn der Browser oder der Tab geschlossen wird.

- IndexedDB wird verwendet, um große Datenmengen zu speichern. Es ermöglicht asynchrone Speicherung und ist NoSQL. Bilder und Videos können ebenfalls gespeichert werden. Die maximale Kapazität variiert je nach Browser, liegt aber bei ca. 50 MB. Es kann auch offline verwendet werden.

2. Axios Interceptor

Wenn Sie Axios verwenden, können Sie den integrierten Interceptor verwenden. Für die gleiche Anfrage wird die Antwort zurückgegeben, ohne sie an den Server zu senden.

Caching innerhalb des Nuxt-Frameworks

Wenn man eine Komponente mit dem keep-alive-Tag umschließt, kann man die Komponente cachen.

Man kann einstellen, ob fetch() während des Server-Side Renderings aufgerufen werden soll. Wenn es false ist, wird fetch nur clientseitig aufgerufen.

Es gibt auch die Möglichkeit, Vuex zu verwenden. Das Prinzip ist das gleiche wie beim Browser-Speicher.

Man kann einen Webserver (Nginx) verwenden, um Cache-Einstellungen in die Antwortheader einzubetten.

Beachten Sie jedoch, dass durch den Cache die sofortige Anwendung von Änderungen an Ressourcen wie Bildern verzögert werden kann. In solchen Fällen muss der Cache ungültig gemacht werden. Ändern Sie den Dateinamen, fügen Sie eine Anfrage zum Ungültigmachen des Caches hinzu oder verwenden Sie AWS CloudFront, um die Cache-Ungültigmachung anzuwenden.

Es gibt auch die Möglichkeit, auf dem Nuxt-Server gerenderte Seiten im Memory-Cache zu speichern.

Dies ist ein Server-Side Caching, bei dem nicht nur APIs, sondern auch ganze Seiten gecached werden. Das bedeutet, dass beim Klicken auf "Zurück" die Seite ohne Verzögerung geladen wird. Diese Methode ist sehr performant, erfordert aber die Verwendung von Server-Speicher und sollte daher mit Vorsicht eingesetzt werden.

Wenn beispielsweise 10.000 Benutzer dieselbe Seite anfordern,

wird die Seite beim ersten Benutzeranfrage gerendert und gecached.

Wenn dann 9.999 weitere Benutzer auf dieselbe Seite zugreifen, antwortet der Server mit dem gecachten Ergebnis.

-> Wenn für jeden Benutzer individualisierte Daten ausgegeben werden müssen, ist diese Methode nicht geeignet.

+ cache verwendet intern das lru-cache-Paket.

* lru: Ein Caching-Algorithmus, der zuerst die am längsten nicht verwendeten Daten entfernt.

Es werden Hashmaps oder doppelt verkettete Listen verwendet, um Key-Value-Paare schnell zu finden: O(1) Zeitkomplexität.