Comment mettre en cache les réponses API + le cache des pages web

Vous avez probablement déjà vécu cette expérience : lors d’un retour arrière sur un site web, une page déjà chargée est rechargée.

Par exemple, sur un site de commerce électronique, lorsque vous cliquez sur un produit affiché dans les résultats de recherche, puis que vous revenez en arrière,

une nouvelle recherche est effectuée.

Le rechargement d’une page déjà chargée est néfaste pour l’expérience utilisateur (UX), mais pose également des problèmes plus importants au niveau du système.

Le rechargement de la page entraîne des appels d’API inutiles et une augmentation du trafic.

Des problèmes de coût peuvent survenir, et si des données sont collectées sur cette page, il peut y avoir un problème de sur-collecte de données spécifiques.

Pour résoudre ce problème, la mise en cache des pages ou des résultats d’API peut être très efficace.

1. Utilisation de l’espace de stockage du navigateur (localStorage, SessionStorage, IndexedDB)

- localStorage conserve les données même après la fermeture du navigateur.

- sessionStorage supprime les données lorsque le navigateur ou l’onglet est fermé.

- IndexedDB est utilisé pour stocker de grandes quantités de données. Il permet un stockage asynchrone et est de type NoSql. Il est possible d’y stocker des images et des vidéos. La capacité maximale varie selon le navigateur, mais se situe autour de 50 Mo. Il est également utilisable hors ligne.

2. Axios Interceptor

Si vous utilisez axios, vous pouvez utiliser les intercepteurs intégrés. Pour les mêmes requêtes, la réponse est renvoyée sans envoyer de requête au serveur.

Mise en cache dans le framework Nuxt

En entourant un composant avec la balise keep-alive, vous pouvez mettre le composant en cache.

Il est possible de configurer si fetch() doit être appelé pendant le rendu côté serveur. Si la valeur est false, fetch est appelé uniquement côté client.

Il est également possible d’utiliser Vuex. Le principe est le même que celui du stockage du navigateur.

Il est possible d’utiliser un serveur web (Nginx) pour inclure les paramètres de cache dans l’en-tête de réponse.

Cependant, en raison de la mise en cache, la mise à jour immédiate des ressources telles que les images peut ne pas être possible. Dans ce cas, il est nécessaire d’invalider le cache. Il est possible de modifier le nom du fichier, d’ajouter une demande d’invalidation du cache ou, si vous utilisez AWS CloudFront, d’appliquer l’invalidation du cache.

Il est également possible de stocker la page elle-même rendue par le serveur Nuxt dans le cache mémoire.

Il s’agit de la mise en cache côté serveur, et non seulement l’API, mais aussi la page entière est mise en cache. Ainsi, lors d’un retour arrière, la page est chargée immédiatement sans délai. Les performances sont excellentes, mais il est nécessaire de faire attention car la mémoire du serveur est utilisée.

Si 10 000 utilisateurs demandent la même page,

lors de la première requête d’un utilisateur, la page est rendue et mise en cache.

Par la suite, lorsque 9 999 utilisateurs accèdent à la même page, le serveur répond avec le résultat mis en cache.

-> Cette méthode n’est pas idéale si vous devez afficher des données personnalisées pour chaque utilisateur.

+ Le cache utilise en interne le paquet lru-cache.

* lru : algorithme de mise en cache qui supprime en priorité les données les moins utilisées récemment.

Il utilise des structures de données de type HashMap ou liste doublement chaînée pour rechercher rapidement les paires clé-valeur : complexité temporelle O(1).