Bonne pratique
Lorsqu'on affiche une liste de produits, d'articles, sur notre site, il est tentant de donner la possibilité au visiteur de tout voir en faisant simplement défiler la page en chargeant le contenu petit à petit. Cet effet de style va générer le contenu pour l'afficher au fur et à mesure. Il va donc demander au serveur les x prochains articles/produits à chaque "scroll". Cela pourra entrainer des problèmes de performances, de référencement naturel et de respect de l'accessibilité web.
Mettez en place une pagination classique avec un système de filtre performant. Le visiteur trouvera plus facilement le contenu qui l'intéresse et les robots d'indexation aussi. Cette bonne pratique facilite le respect du Référentiel Général d'Amélioration de l'Accessibilité (RGAA) introduit par la loi n° 2005-102 du 11 février 2005 pour l’égalité des droits et des chances, la participation et la citoyenneté des personnes handicapées (cf. https://www.numerique.gouv.fr/publications/rgaa-accessibilite/obligations/").
Le "Référentiel d'écoconception web (REW)" est publié par GreenIT.fr dans le cadre des travaux du Collectif conception numérique responsable selon les termes de la licence Creative Commons Attribution.
Avec React.js et Next.js, nous pouvons implémenter une pagination en synchronisant l'état avec l'URL. Cela permet de diviser le contenu en pages, réduisant ainsi les requêtes fréquentes au serveur.
En utilisant des frameworks tels que Next.js, nous pouvons facilement gérer les filtres performants et les URL partagées, améliorant l'expérience utilisateur et l'indexation par les robots. Respecter le RGAA est ainsi plus aisé.
Ressources économisées