Respecter le principe de navigation rapide dans l’historique

Ce que dit le référentiel

Les navigateurs possèdent une fonction de navigation rapide dans l’historique (boutons Page précédente et Page suivante), souvent nommée back-forward cache ou encore bfcache.

Contrairement au cache HTTP qui permet de garder en mémoire les réponses aux requêtes précédemment effectuées et donc d'éviter de les générer plusieurs fois inutilement et d'accélérer le chargement de pages, le cache bfcache permet de garder en mémoire une page entière. Néanmoins, comme l'utilisation de cette fonctionnalité mobilise des resources machine supplémentaires côté utilisateur, il faut veiller à alléger au maximum les fonctionnalités des pages stockées avec le bfcache. Par ailleurs, l'utilisation de bfcache implique certaines précautions notamment lorsque le délai d'attente est dépassé (setTimeout). En effet, comme les navigateurs suspendent l'exécution des timers en attente et les tâches dans les files d'attente JavaScript, et reprennent le traitement des tâches lorsque la page est restaurée à partir du bfcache, il peut y avoir des situations problématiques. Par exemple, si le navigateur suspend une tâche requise dans le cadre d'une transaction IndexedDB ou d'utilisation d'API et que d'autres onglets (utilisant les mêmes bases de données IndexedDB) sont ouverts à ce moment-là, le navigateur ne mettra pas en cache les différentes pages.

Par conséquent, il faut éviter tout élément qui rendrait la page inéligible au bfcache, et/ou qui rendrait la page inutilisable après l'avoir quittée (ou éventuellement les rendre utilisables à nouveau quand la page est réutilisée, ou juste avant qu'elle soit mise en cache).

Notre avis

L’utilisation de Next.js permet de bénéficier d’une navigation rapide et optimisée grâce à son app router. Ce dernier utilise une approche hybride serveur et client, ce qui permet de limiter les appels inutiles côté client et de maximiser l’efficacité du cache.