El caché de páginas web y respuestas de API puede resolver problemas de sobrecarga del sistema y deterioro de la UX causados por solicitudes de datos innecesarias.
Se pueden utilizar diversas técnicas de caché, como el almacenamiento del navegador, Axios Interceptor, Nuxt keep-alive, Vuex y el caché del servidor web. El caché de páginas renderizadas en el servidor es efectivo para mejorar el rendimiento, pero se debe tener cuidado con el uso de memoria.
La invalidación del caché permite la aplicación inmediata de la distribución de recursos como imágenes.
Es común experimentar la recarga de páginas ya cargadas 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 realiza una nueva búsqueda.
La necesidad de volver a cargar una página ya cargada no solo afecta negativamente a la experiencia del usuario (UX), sino que también genera problemas mayores a nivel de sistema.
Volver a cargar la página implica llamadas innecesarias a la API y un aumento del tráfico.
Esto puede provocar problemas de costes, y si se están recopilando datos en esa página, también puede producirse una sobre-recopilación 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. Utilizar el 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 asíncrono y es NoSQL. Se pueden almacenar imágenes y vídeos. La capacidad máxima varía según el navegador, pero suele ser de unos 50 MB. También se puede usar sin conexión.
2. Axios Interceptor
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 llamará en el lado del cliente.
También existe la posibilidad 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 para recursos como imágenes. En estos casos, la caché debe invalidarse. Se puede cambiar el nombre del archivo, enviar una solicitud de invalidación de caché o, si se utiliza AWS CloudFront, se puede aplicar la invalidación de caché.
También existe la posibilidad de almacenar en caché la propia página renderizada en el servidor Nuxt en la caché de memoria.
Se trata de un almacenamiento en caché del lado del servidor, en el que se almacena en caché no solo la API, sino también toda la página. Es decir, se carga inmediatamente sin demora 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 la solicita, la página se renderiza y se almacena en caché.
A partir de entonces, cuando los otros 9.999 usuarios acceden a la misma página, el servidor responde con el resultado almacenado en caché.
-> Este método no es adecuado si es necesario mostrar datos personalizados para cada usuario.