Cómo cachar respuestas de API + caché de páginas web

Es común la experiencia de volver a cargar una página que ya se había cargado al usar el botón "Atrás" en un sitio web.

Por ejemplo, en una tienda online, después de hacer clic en un producto de los resultados de búsqueda y luego usar el botón "Atrás",

se vuelve a realizar la búsqueda.

Volver a cargar una página que ya se ha cargado no solo es malo para la UX, sino que también genera problemas a nivel de sistema.

Al recargar la página, se realizan llamadas API innecesarias, lo que aumenta el tráfico.

Esto puede generar problemas de costes, y si se están recopilando datos en dicha página, también puede provocar una recopilación excesiva de datos específicos.

Para solucionar esto, el almacenamiento en caché de las páginas o los resultados de la API puede ser muy efectivo.

1. Uso del almacenamiento del navegador (localStorage, SessionStorage, IndexedDB)

- localStorage mantiene los datos incluso después de cerrar el navegador.

- sessionStorage elimina los datos al cerrar el navegador o la pestaña.

- IndexedDB se utiliza para almacenar grandes cantidades de datos. Permite el almacenamiento asincrónico y es NoSql. También permite almacenar imágenes y vídeos. La capacidad máxima varía según el navegador, pero suele ser de unos 50 MB aproximadamente. Se puede utilizar sin conexión.

2. Interceptor de Axios

Si se utiliza axios, se puede utilizar el interceptor integrado. Para la misma solicitud, devuelve la respuesta sin enviarla al servidor.

Almacenamiento en caché dentro del framework Nuxt

Se puede almacenar en caché un componente envolviéndolo con la etiqueta keep-alive.

Se puede configurar si se va a llamar a fetch() durante el renderizado del lado del servidor. Si es false, fetch solo se llama en el lado del cliente.

También existe la opción de utilizar Vuex. El principio es el mismo que el del almacenamiento del navegador.

Se puede utilizar un servidor web (Nginx) para incluir la configuración de caché en los encabezados de respuesta.

Sin embargo, debido a la caché, la implementación inmediata puede no ser posible al distribuir recursos como imágenes, en cuyo caso la caché debe invalidarse. Esto se puede lograr cambiando el nombre del archivo, incluyendo una solicitud para invalidar la caché o, si se utiliza AWS CloudFront, aplicando la invalidación de la caché.

También existe la posibilidad de almacenar en caché la propia página renderizada en el servidor Nuxt en la caché de memoria.

Es un almacenamiento en caché del lado del servidor, y no solo se almacena en caché la API, sino también toda la página. Es decir, se carga inmediatamente al usar el botón "Atrás". Tiene un rendimiento muy alto, pero hay que tener cuidado porque utiliza la memoria del servidor.

Si 10.000 usuarios solicitan la misma página,

Cuando el primer usuario realiza la solicitud, la página se renderiza y se almacena en caché.

Cuando los 9.999 usuarios restantes acceden a la misma página, el servidor responde con el resultado almacenado en caché.

-> Este método no es bueno si se deben mostrar datos personalizados para cada usuario.

+ cache utiliza internamente el paquete lru-cache.

* lru: Es un algoritmo de almacenamiento en caché que elimina primero los datos que no se han utilizado durante más tiempo.

Utiliza estructuras de datos de mapa hash o listas doblemente enlazadas para buscar rápidamente pares clave-valor: complejidad de tiempo O(1)