Nicolas Le Merdy
Blog
AstroSEOReactPerformance

Migration React Vite → Astro : comment j'ai atteint 100/100 en SEO

Le problème de départ

Mon site portfolio tournait sous React Vite en SPA (Single Page Application). Visuellement correct, mais le contenu était invisible pour les crawlers : Google indexait la page mais ne voyait qu'une coquille vide — le HTML renvoyé par le serveur ne contenait qu'une <div id="root"></div>, sans texte ni structure exploitable pour le référencement. Tout le contenu était généré côté client en JavaScript.

Pourquoi Astro plutôt que Next.js

J'aurais pu migrer vers Next.js, que je connais bien. Mais pour un site vitrine statique, Astro est supérieur : il génère du HTML pur par défaut, sans JavaScript inutile côté client. Next.js embarque un runtime JS même pour des pages totalement statiques. Pour un portfolio freelance, Astro est le bon outil.

La migration en pratique

La migration s'est faite en une seule session de travail. Les étapes clés :

  • Initialisation d'un projet Astro 5 avec Tailwind CSS
  • Création d'un layout commun avec composant SEO réutilisable (title, meta description, canonical, Open Graph)
  • Ajout de @astrojs/sitemap pour la génération automatique du sitemap
  • Schema.org JSON-LD pour le balisage structuré (Person + ProfessionalService)
  • Configuration de l'adapter Vercel pour le déploiement statique

Les résultats

Après déploiement sur Vercel et test sur PageSpeed Insights :

100/100

Performance

100/100

SEO

100/100

Accessibilité

0,2 s

LCP

0 ms

Total Blocking Time

Le site est passé d'un contenu invisible pour Google à une indexation immédiate constatée dans Google Search Console.

Ce que j'en retiens

Pour tout site vitrine ou portfolio freelance, une SPA React est un mauvais choix SEO. Astro règle ce problème à la racine en générant du HTML statique propre, indexable, ultra-rapide. Si vous avez un projet similaire et cherchez un développeur freelance .NET full stack disponible en télétravail , n'hésitez pas à me contacter.