Hydration

React combine <form action>, useActionState et useOptimistic pour gérer les retours d’attente et les mises à jour optimistes tout en conservant un envoi de formulaire avant l’exécution de JavaScript. L’article montre comment cette continuité permet d’enrichir l’interface après hydratation sans abandonner le comportement natif du navigateur.

Le point décisif est de garder l’action serveur directement dans action : une fonction cliente intermédiaire casse la soumission sans JavaScript. Pour l’optimisme, useHydrated() permet de choisir entre l’action serveur et sa version enrichie côté client.

Vinext 1.4 réduit le travail à plusieurs étapes du rendu : les layouts App Router s’exécutent une seule fois par requête, le prefetch des routes dynamiques ne génère plus la page entière et les chunks nécessaires à l’hydratation se compilent en arrière-plan dans Chrome récent. Sur le benchmark Hacker News, l’éditeur mesure 31,1 ms de CPU par requête, contre 54,4 ms en 1.3 et 33,7 ms pour Next.js.

La version synchronise aussi la génération du HTML et du payload RSC en cache. Les résultats restent toutefois dépendants du scénario : sur un prototype de site éditorial, Next.js peint plus vite et consomme moins de CPU par requête. Le test de TanStack Redact révèle un autre compromis : moins de JavaScript téléchargé, mais une hydratation nettement plus coûteuse sur les pages chargées.

TanStack Redact 0.2.0 remplace React et React DOM dans le navigateur sans modifier le code de l’application. Ses intégrations stables couvrent TanStack Start, Vite, Vinext et Next.js ; dans ces deux derniers frameworks, React reste chargé du rendu serveur tandis que Redact gère l’hydratation et le rendu client.

Les mesures fournies par TanStack montrent des réductions de bundle allant de 20,4 % à 70,5 % sur leurs applications de référence, mais ces gains varient selon le projet. Le compromis est concret : Redact rend de façon synchrone, sans time slicing ni rendu interruptible de React. Un rendu lourd peut donc retarder les interactions ; la compatibilité et les écrans les plus chargés méritent d’être vérifiés dans chaque application.