Implementación SWR en Angular: Carga de datos más rápida para el usuario

La idea inicial que me lleva a escribir este blogpost es explicar cómo hemos implementado el patrón SWR, que es bastante conocido y usado en React (a través de una librería). No lo es tanto en Angular, y no encontré una librería que me convenciera suficientemente, lo cual nos hizo decantarnos por la opción de una implementación propia, siguiendo la misma filosofía.

El nombre "SWR" deriva de stale-while-revalidate, una estrategia de invalidación de caché HTTP popularizada por HTTP RFC 5861. Básicamente SWR es una estrategia para devolver primero los datos de la caché (stale), luego enviar la petición fetch (revalidate), y finalmente llegar con los datos actualizados.

Nuestro propio servicio

El problema que detectamos en nuestro proyecto, es que necesitábamos mejorar de alguna forma la carga que había en un componente tipo calendario con información, que tenía una navegación semanal, y en cada navegación hacía una recarga de datos que podía ser algo pesada en alguno de los entornos, incluso volviendo a cargar las mismas semanas visitadas.

Después de navegar por Internet, investigar un poco, para intentar entender cómo funcionaba el patrón SWR, hacer algunas pruebas y ver las opciones que se ofrecían en forma de librería para Angular, no me convenció nada realmente. Me parecía que la idea en sí no era tan compleja, como para necesitar una librería externa.

Así que os voy a mostrar un poco cuales fueron los pasos para implementar lo que es nuestra propia implementación de SWR, siempre abierto a mejoras, por supuesto.

Básicamente, mi idea era crear un servicio que haría de wrapper del httpClient.get de Angular, y en ese servicio manejar una especie de cache (en memoria) que devuelva la información si la contiene la cache y realice la llamada al backend que te devuelva la nueva información para así revalidarla, sustituyendo la información cacheada y devolviendosela al componente que haya invocado el servicio. Veamos un poco el código del método GET:

Para evitar problemas de memoria, implementamos un mecanismo de limpieza de la cache, que se ejecuta cada X tiempo, ya que habrá casos donde estemos almacenando información que luego no volveremos a necesitar. El resto de información que devolvemos recurrentemente, la devolvemos de inmediato gracias a esta cache local que hace las veces de stale, y una vez obtenemos la nueva información desde el backend, la sustituimos y la devolvemos al componente en cuestión que haya utilizado el servicio.

Esta implementación es realmente sencilla; quizá lo más costoso fue ajustar el tema de la limpieza de la cache, pero supone una mejora muy notable para los usuarios, que tienen una experiencia mucho mejor navegando por la aplicación. Como he comentado, no encontré nada que me convenciera realmente, librerías más complejas con funcionalidad que no íbamos a utilizar o que no tenía demasiado soporte, así que valorándolo decidimos implementarlo nosotros mismos en el proyecto, y mereció mucho la pena.

Espero que este post os ayude y podáis implementar algo similar que mejore el uso de vuestras aplicaciones 🫵🏼 😊