Build completed in 34s, 0 errors, 3 warnings. Ce message de fin de build, obtenu après plusieurs semaines de travail sur la migration d’un front Next.js vers Astro 6 pour une plateforme de formation continue en santé consommant un WordPress headless, a marqué la fin d’un chantier engagé pour une raison précise : la majorité des pages du catalogue de formations restaient du contenu essentiellement statique, ne justifiant pas le poids d’hydratation React complète que le framework précédent imposait par défaut à chaque page.
Le diagnostic initial : trop de JavaScript pour du contenu qui ne bouge pas
Les pages de présentation de formation, générées depuis WordPress via WPGraphQL, contenaient essentiellement du texte, des images et un formulaire d’inscription. Sur l’architecture Next.js d’origine, chaque page chargeait pourtant l’intégralité du bundle JavaScript nécessaire à l’hydratation React de l’application, y compris pour des visiteurs qui ne faisaient jamais que lire une fiche de formation sans interagir avec elle.
Pourquoi Astro plutôt qu’une simple optimisation Next.js
L’architecture d’îlots (islands architecture) d’Astro correspondait précisément au profil du site : l’essentiel des pages est rendu en HTML statique sans JavaScript, seuls les composants réellement interactifs (formulaire d’inscription, widget de recherche de formations) étant hydratés individuellement, avec la directive client:visible qui ne charge le JavaScript qu’au moment où le composant entre dans le viewport.
---
import { getFormation } from '../lib/wordpress';
import InscriptionForm from '../components/InscriptionForm.jsx';
const { slug } = Astro.params;
const formation = await getFormation(slug);
---
Le gain mesuré sur les pages de catalogue
Le temps de chargement moyen des pages de catalogue, mesuré via des tests de terrain sur trois mois avant et après migration, est passé de 1,9 seconde à 640 millisecondes, un gain directement attribuable à la réduction drastique du JavaScript chargé par défaut sur ces pages majoritairement statiques.
La régression rencontrée : le suivi de progression
Le point de friction est apparu sur les pages de suivi de progression pédagogique, nettement plus interactives, où plusieurs composants devaient partager un état commun (progression globale, notifications, synchronisation avec le LMS externe). L’architecture d’îlots d’Astro, pensée pour des composants isolés, a nécessité un travail supplémentaire de mise en commun d’état via un magasin partagé (nanostores), un besoin qui n’existait pas de la même façon sous Next.js où l’ensemble de l’arbre React partageait naturellement son état.
- Migration des pages de catalogue en premier, gain de performance immédiat et à faible risque.
- Report de la migration des pages de suivi de progression à une seconde phase, après stabilisation du magasin d’état partagé.
- Conservation temporaire de Next.js pour les pages les plus interactives, le temps de valider l’approche Astro sur le reste du site.
Ce que la migration progressive a évité
Une bascule intégrale et simultanée de l’ensemble du site aurait exposé la plateforme au risque de casser en une seule fois le suivi de progression des apprenants en cours de formation, un risque jugé inacceptable pour un public dont les heures de formation doivent être validées auprès d’un ordre professionnel. La migration progressive, section par section, a permis de valider chaque étape en conditions réelles avant de poursuivre.
Un gain de performance mesuré sur une partie du site ne garantit jamais qu’il se reproduira à l’identique sur les pages les plus interactives : mieux vaut migrer par vagues et mesurer à chaque étape que parier sur une bascule totale.
Notre verdict
Astro 6 a tenu sa promesse sur les pages de contenu essentiellement statique, avec un gain de performance qui a directement amélioré le taux de complétion du formulaire d’inscription aux formations. La migration des sections les plus interactives a demandé un effort d’architecture supplémentaire, non anticipé au départ, qui rappelle qu’un framework taillé pour du contenu statique ne remplace pas nécessairement un framework généraliste sur les parties les plus dynamiques d’un même site. Le contenu pédagogique diffusé sur ces pages n’entre pas dans le périmètre de ce retour d’expérience.
