Jak cachować odpowiedzi API + cachowanie stron internetowych

Wielokrotnie zdarzało się, że po kliknięciu przycisku "wstecz" na stronie internetowej ponownie ładowana była już załadowana strona.

Na przykład, w sklepie internetowym po kliknięciu produktu z wyników wyszukiwania, a następnie kliknięciu przycisku "wstecz",

wyniki wyszukiwania są ponownie generowane.

Ponowne ładowanie już załadowanej strony jest nie tylko niekorzystne dla UX, ale także stanowi większy problem z punktu widzenia systemu.

Ponowne ładowanie strony powoduje niepotrzebne wywołania API i zwiększa ruch sieciowy.

Może to prowadzić do problemów z kosztami, a jeśli na stronie zbierane są dane, może to również prowadzić do nadmiernego zbierania określonych danych.

Aby rozwiązać ten problem, można z powodzeniem wykorzystać mechanizm cache'owania stron lub wyników API.

1. Wykorzystanie pamięci przeglądarki (localStorage, SessionStorage, IndexedDB)

- localStorage przechowuje dane nawet po zamknięciu przeglądarki.

- sessionStorage usuwa dane po zamknięciu przeglądarki lub zakładki.

- IndexedDB służy do przechowywania dużych ilości danych. Możliwość zapisu asynchronicznego, NoSQL. Można przechowywać obrazy i wideo. Maksymalna pojemność różni się w zależności od przeglądarki, ale wynosi około 50 MB. Można go używać w trybie offline.

2. Axios Interceptor

Korzystając z biblioteki axios, można wykorzystać wbudowaną funkcję interceptera, aby zwrócić odpowiedź bez wysyłania żądania do serwera dla tego samego żądania.

Buforowanie w frameworku Nuxt

Umieszczenie komponentu w tagu keep-alive pozwala na buforowanie komponentu.

Można ustawić, czy wywoływać fetch() podczas renderowania po stronie serwera. Jeśli wartość to false, fetch zostanie wywołany tylko po stronie klienta.

Można również użyć Vuex. Zasada działania jest podobna do pamięci przeglądarki.

Można wykorzystać serwer WWW (Nginx) do ustawienia konfiguracji cache'owania w nagłówkach odpowiedzi.

Należy jednak pamiętać, że cache'owanie może uniemożliwić natychmiastowe zastosowanie zmian, np. przy wdrażaniu nowych wersji obrazów. W takim przypadku należy unieważnić cache'a, zmieniając nazwę pliku, dodając żądanie unieważnienia cache'a lub korzystając z AWS CloudFront.

Na serwerze Nuxt istnieje również możliwość przechowywania samych renderowanych stron w pamięci podręcznej.

Jest to buforowanie po stronie serwera, które buforuje nie tylko API, ale całą stronę. Oznacza to, że po kliknięciu przycisku "wstecz" strona ładuje się natychmiast. Jest to bardzo wydajne, ale należy pamiętać o użyciu pamięci serwera.

Jeśli 10 000 użytkowników żąda tej samej strony,

Pierwszy użytkownik renderuje stronę, która jest następnie buforowana.

Następnie 9999 użytkowników uzyskuje dostęp do tej samej strony, a serwer zwraca buforowany wynik.

-> Ta metoda nie jest dobra, jeśli musisz wyświetlać spersonalizowane dane dla każdego użytkownika.

+ cache wewnętrznie używa pakietu lru-cache.

* lru: algorytm buforowania, który usuwa najstarsze, najmniej używane dane.

Używa struktury danych mapy hashującej lub listy dwukierunkowej do szybkiego wyszukiwania par klucz-wartość: złożoność czasowa O(1).