Amélioration progressive avec les actions serveur

L'amélioration progressive est une stratégie de développement web qui consiste à commencer par une base HTML fonctionnelle, puis à y ajouter des fonctionnalités JavaScript. Les fonctionnalités essentielles fonctionnent pour tous les utilisateurs, y compris ceux qui ont désactivé JavaScript, disposent d'une connexion lente ou utilisent des technologies d'assistance, tandis que les utilisateurs avec JavaScript bénéficient d'une expérience enrichie.

Un formulaire avec action={serverAction} fonctionne comme une requête POST HTML sur une page entière, même sans JavaScript. Le navigateur envoie le formulaire, le serveur exécute l'action, puis renvoie une page HTML mise à jour. Il s'agit du même mécanisme qui fait fonctionner les formulaires web depuis 1995 : les actions côté serveur de React sont conçues pour être compatibles avec lui.

Lorsque JavaScript est absent, la validation doit avoir lieu sur le serveur. L'action côté serveur valide les données du formulaire et, si la validation échoue, renvoie l'état d'erreur. Le serveur génère de nouveau la page en y intégrant les messages d'erreur dans le HTML. L'utilisateur voit les erreurs sans qu'aucun JavaScript côté client ne soit exécuté.

Lorsque React hydrate la page, il intercepte les envois de formulaires et les traite comme des appels asynchrones à des actions côté serveur plutôt que comme des requêtes POST sur une page entière. L'utilisateur bénéficie d'une mise à jour sur place sans rechargement de page, d'un état d'attente visible et d'une interface optimiste, le tout sans modifier l'action ni la structure sous-jacente du formulaire.

Le serveur génère le formulaire avec l'état initial intégré au HTML. Lorsque React hydrate la page, il récupère cet état initial sans provoquer de scintillement ni d'incohérence. Le hook useActionState est conçu pour mettre proprement en cohérence l'état initial rendu par le serveur avec l'hydratation côté client.

Les transitions React permettent à l'interface de rester interactive pendant l'appel d'une action côté serveur. Encadrer l'envoi du formulaire dans une transition permet à React de donner une priorité moindre à l'aller-retour vers le serveur et de maintenir la réactivité de la page. C'est ce qui donne à l'expérience enrichie par JavaScript une impression de rapidité nettement supérieure à celle d'un rechargement de page entière.

Sans JavaScript : l'utilisateur clique sur Envoyer, le navigateur envoie une requête POST complète, puis le serveur renvoie une nouvelle page HTML, avec un bref écran blanc et une réinitialisation du défilement. Avec JavaScript : React intercepte l'envoi, l'action s'exécute de manière asynchrone et seules les parties modifiées de la page sont mises à jour sur place, sans écran blanc ni réinitialisation du défilement.

L'amélioration progressive est bénéfique pour les robots d'indexation des moteurs de recherche, qui peuvent ne pas exécuter JavaScript. Une page de recherche ou de filtrage pilotée par un formulaire HTML complet peut être indexée et explorée. Les résultats générés par le serveur permettent au robot de voir du contenu réel plutôt que des éléments vides en attente de JavaScript.

Les lecteurs d'écran et les technologies d'assistance fonctionnent mieux avec du HTML sémantique. Un formulaire amélioré progressivement utilise de véritables éléments <form>, <input> et <button> que les technologies d'assistance comprennent nativement. JavaScript ajoute des régions dynamiques ARIA pour annoncer les erreurs, ce qui améliore la base accessible au lieu de la remplacer.

Sur les réseaux peu fiables, les paquets JavaScript peuvent ne pas se charger. Une page améliorée progressivement reste fonctionnelle pour son usage de base. Cette résilience est particulièrement importante pour les utilisateurs de connexions mobiles dans des zones mal couvertes, ou dans les régions où les conditions réseau varient considérablement.

L'amélioration progressive est particulièrement utile pour les formulaires destinés au grand public : inscription, contact, recherche et finalisation d'achat. Les tableaux de bord internes comportant des interactions complexes n'en ont peut-être pas besoin. Appliquez-la de manière réfléchie lorsque la portée et la fiabilité maximales sont importantes, par exemple pour les pages marketing, le commerce électronique et les parcours d'intégration des utilisateurs.

Quel est le principe fondamental de l'amélioration progressive ?

L'amélioration progressive signifie que le formulaire fonctionne comme une requête POST HTML classique sans JavaScript. Les actions côté serveur prennent cela en charge nativement : action={serverAction} permet l'envoi d'une requête POST sur une page entière. L'hydratation de React transforme ensuite le formulaire en mises à jour asynchrones sur place avec des états d'attente. Cette approche bénéficie à l'accessibilité, au référencement naturel et aux utilisateurs disposant d'une faible connectivité, tout en offrant une expérience JavaScript riche.