Routing (ou Routeur)
Le routing est le mécanisme qui associe une URL à un contenu ou à une action. Le routeur est le composant logiciel qui lit l'adresse demandée, décide ce qu'il faut afficher ou exécuter, et met à jour l'URL lorsque l'utilisateur navigue.
C'est le standard téléphonique du site : une demande arrive, il faut la diriger vers le bon interlocuteur. Sans routeur, une application ne serait qu'un seul écran ; avec un routeur, chaque état intéressant du produit obtient une adresse propre, que l'on peut copier, envoyer par mail, mettre en favori et faire indexer.
Comment ça marche
Il existe deux endroits où l'on route. Côté serveur, une requête HTTP arrive, le serveur la compare à une table de routes et confie le travail au bon gestionnaire, qui renvoie une page HTML ou une réponse JSON. Côté client, le routeur du navigateur intercepte les clics sur les liens internes, empêche le rechargement complet, modifie l'adresse via l'API History et affiche la vue correspondante.
Une table de routes distingue les routes statiques, les routes dynamiques contenant des segments variables comme un identifiant produit, les routes imbriquées qui partagent une mise en page commune, et une route de repli pour les adresses inconnues. Nuxt et Next popularisent le routing par fichiers : l'arborescence du dossier des pages devient la table des routes, sans configuration à maintenir.
À quoi ça sert concrètement
- Donner une URL partageable et indexable à chaque écran utile
- Découper le JavaScript par route, pour ne charger que le code de la page consultée
- Placer des gardes de navigation : redirection vers la connexion, contrôle de droits, confirmation avant de quitter un formulaire
- Gérer proprement les erreurs 404 et les redirections après une refonte
- Déclencher le suivi d'audience à chaque changement de vue
Les pièges
- Une application cliente déployée sans règle de repli côté serveur renvoie une erreur 404 dès qu'on rafraîchit une URL profonde
- Les variantes d'une même adresse (avec ou sans barre oblique finale, avec des paramètres de tri ou de filtre) créent du contenu dupliqué s'il n'y a pas d'URL canonique
- Lors d'une navigation côté client, le focus clavier et la position de défilement ne se réinitialisent pas tout seuls, et aucun changement de page n'est annoncé aux lecteurs d'écran
- Les redirections en chaîne, accumulées au fil des refontes, gaspillent du budget de crawl et ralentissent l'utilisateur
Quand se pose la question
Tout site a un routage ; le vrai choix porte sur l'endroit où il vit. Un site éditorial ou vitrine se contente très bien d'un routage rendu côté serveur. Une application riche, avec un état à conserver entre les écrans, gagne à router côté client, à condition de reproduire côté serveur la même table de routes.
Termes associés
React
React est une bibliothèque JavaScript open source, développée chez Facebook, devenu Meta, et publié...
Front-end
Le front-end désigne la partie d'un site ou d'une application qui s'exécute dans le navigateur de l...
Design System
Un design system est l'ensemble structuré et documenté des règles, composants et ressources qui déf...
Shadow DOM
Le Shadow DOM est une fonctionnalité native du navigateur qui permet de rattacher à un élément un s...
Web Component
Un Web Component est un élément HTML personnalisé, réutilisable et encapsulé, construit à partir de...
Single Page Application (SPA)
Une Single Page Application, ou application monopage, est une application web qui charge un seul do...
