10-04-2025
Une description du fonctionnement de sites web2 qui présentent des articles avec de vraies pages sans rechargement, tout en concervant les fonctionalités d'url.
Quand on fait un site qui présente divers pages, et qu'on souhaite un fonctionnement moderne en web2, on va parfois avoir besoin ou envie de gérer un changement d'url sans rechargement. Pour ça, il existe deux solutions, on va les expliquer ici.
Une technique est de gérer l'url avec des ancres. Pour gérer le bouton back, on peut mettre un hook sur le changement d'url en javascript, et charger la page correspondante. C'est une méthode assez simple, efficace, mais elle pose deux problèmes : d'une part, cette information n'est pas envoyée au serveur, ce qui peut être génant pour gérer l'indexation par les moteurs de recherche, et d'autre part, on est limité à une seule ancre, ce qui fait qu'on aura plus cette fonctionnalité pour gérer la position dans la page. En gros, c'est un détournement de fonctionnalité, et ça enlève donc une feature. Comme l'info n'est pas envoyée au serveur, on ne peut pas non plus générer des méta tags correspondants à la page, ce qui coince sur le partage sur les réseaux sociaux par exemple.
L'autre solution consiste à manipuler l'historique depuis javascript, pour ajouter une page à l'historique on peut faire ceci :
history.pushState({key:url}, "", url);
Et pour écouter le bouton back :
window.onpopstate = event => { openLink(decodeURIComponent(location.search)); }
C'est ce que j'ai décidé de faire ici. ça représente chez moi une trentaine de lignes de code pour tout gérer :
function openLink(url){ let query = decodeURIComponent(url.substring(url.indexOf("?")+1)); // ....innerHTML = ...; } function a(link, e){ let url = link.href; e.preventDefault(); e.stopPropagation(); history.pushState({key:url}, "", url); openLink(url); } window.onpopstate = event => { openLink(decodeURIComponent(location.search)); }