Cachowanie stron internetowych i odpowiedzi API pozwala rozwiązać problemy związane z obciążeniem systemu i pogorszeniem UX spowodowane niepotrzebnymi ponownymi żądaniami danych.
Można wykorzystać różne techniki cachowania, takie jak pamięć przeglądarki, Axios Interceptor, Nuxt keep-alive, Vuex i cachowanie na serwerze WWW. Cachowanie stron renderowanych po stronie serwera jest skuteczne w poprawie wydajności, ale należy zwrócić uwagę na zużycie pamięci.
Unieważnianie cachowania umożliwia natychmiastowe zastosowanie zmian po wdrożeniu zasobów, takich jak obrazy.
Na pewno wielokrotnie doświadczyłeś sytuacji, gdy po kliknięciu przycisku "wstecz" w przeglądarce, strona, która została już załadowana, ładuje się ponownie.
Na przykład, w sklepie internetowym, po kliknięciu produktu z listy wyszukiwania, a następnie powrocie do listy za pomocą przycisku "wstecz",
wyniki wyszukiwania są ponownie generowane.
Ponowne ładowanie już załadowanej strony ma negatywny wpływ na doświadczenia użytkownika (UX), ale z punktu widzenia systemu problem jest jeszcze większy.
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 skutkować nadmiernym gromadzeniem danych.
Aby rozwiązać ten problem, duże korzyści można osiągnąć poprzez buforowanie 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 karty.
- IndexedDB służy do przechowywania dużych ilości danych. Umożliwia asynchroniczne zapisywanie danych i jest bazą danych NoSQL. Można w nim przechowywać obrazy i filmy. Maksymalna pojemność różni się w zależności od przeglądarki, ale wynosi około 50 MB. Można go również używać w trybie offline.
2. Przechwytywacz Axios
Jeśli używasz biblioteki Axios, możesz wykorzystać wbudowaną funkcję przechwytywacza (interceptor). Dla tego samego żądania, odpowiedź jest zwracana bez wysyłania żądania do serwera.
Buforowanie w frameworku Nuxt
Owijając komponent tagiem keep-alive, można go buforować.
Można ustawić, czy wywoływać fetch() podczas renderowania po stronie serwera. Jeśli wartość to false, fetch jest wywoływane tylko po stronie klienta.
Można również wykorzystać Vuex. Zasada działania jest podobna do pamięci przeglądarki.
Można wykorzystać serwer WWW (Nginx) do ustawienia buforowania w nagłówkach odpowiedzi.
Należy jednak pamiętać, że buforowanie może uniemożliwić natychmiastowe wdrożenie zmian w zasobach, takich jak obrazy. W takich przypadkach konieczne jest unieważnienie buforowanej zawartości. Można to zrobić poprzez zmianę nazwy pliku, wysłanie żądania unieważnienia buforowanej zawartości lub, w przypadku korzystania z AWS CloudFront, zastosowanie unieważnienia buforowanej zawartości.
Możliwe jest również przechowywanie w pamięci podręcznej samych stron renderowanych przez serwer Nuxt.
Jest to buforowanie po stronie serwera, które przechowuje w pamięci podręcznej nie tylko API, ale całą stronę. Oznacza to, że po kliknięciu przycisku "wstecz" strona ładuje się natychmiast. Wydajność jest bardzo wysoka, ale należy uważać, ponieważ zużywa pamięć serwera.
Jeśli 10 000 użytkowników żąda tej samej strony,
Po pierwszym żądaniu strona jest renderowana i umieszczana w pamięci podręcznej.
Następnych 9999 użytkowników otrzymuje odpowiedź z pamięci podręcznej.
-> Ta metoda nie jest odpowiednia, jeśli konieczne jest wyświetlanie spersonalizowanych danych dla każdego użytkownika.