Astro : ship less JavaScript
Astro est un framework web qui génère des sites statiques ultra-rapides en envoyant zéro JavaScript par défaut. Son approche « islands » permet d’hydrater uniquement les composants interactifs. Chez Eve Media, nous utilisons Astro pour les sites content-first performants.
Le problème qu’Astro résout
Les frameworks JavaScript modernes envoient beaucoup de JS au navigateur, même pour des pages largement statiques. Un blog construit avec Next.js embarque React même si le contenu ne nécessite pas d’interactivité.
Astro génère du HTML pur par défaut. Le JavaScript n’est ajouté que là où il est vraiment nécessaire.
L’architecture Islands
Les « islands » sont des composants interactifs dans une mer de HTML statique. Chaque island s’hydrate indépendamment, avec sa propre stratégie (au chargement, au scroll, au hover). Le reste de la page reste du HTML léger.
Agnostic aux frameworks
Astro est unique : vous pouvez utiliser React, Vue, Svelte, Solid ou Preact dans le même projet. Chaque composant utilise le framework de votre choix. Cette flexibilité permet de réutiliser des composants existants.
Content Collections
Astro excelle pour les sites content-driven. Les Content Collections typent votre contenu Markdown/MDX avec des schémas. La validation garantit la cohérence des frontmatters. C’est parfait pour les blogs, docs et sites marketing.
Performances exceptionnelles
Les sites Astro obtiennent régulièrement des scores Lighthouse parfaits. Moins de JS = chargement plus rapide, meilleur Core Web Vitals, meilleur SEO. Pour les sites content-first, c’est imbattable.
Le routing basé fichiers
Comme Next.js, les pages sont des fichiers dans le dossier pages/. Astro supporte les routes dynamiques, les API routes et les endpoints. La syntaxe .astro combine HTML et expressions JavaScript.
SSR et hybride
Astro peut aussi faire du SSR pour les pages dynamiques. Le mode hybride permet de mixer pages statiques et dynamiques dans le même projet. Vous choisissez le mode de rendu par page.
Intégrations
L’écosystème d’intégrations Astro s’enrichit : Tailwind, MDX, images optimisées, sitemaps, RSS feeds. Une commande ajoute et configure l’intégration automatiquement.
View Transitions
Astro intègre les View Transitions API pour des transitions fluides entre pages, sans SPA. Les animations donnent une impression d’application tout en gardant les avantages du multi-page.
Quand choisir Astro
Sites de contenu : blogs, documentation, sites marketing, portfolios. Sites où la performance est critique. Projets qui n’ont pas besoin d’interactivité complexe côté client.
Quand éviter Astro
Applications hautement interactives (dashboards complexes, apps SaaS) sont mieux servies par React/Vue complet. Astro peut le faire mais ce n’est pas son sweet spot.
Conclusion
Astro représente un retour à la simplicité pour les sites web. En envoyant moins de JavaScript, il offre des performances que les frameworks SPA ne peuvent égaler. Pour le bon cas d’usage, c’est le meilleur choix.
Chez Eve Media, nous utilisons Astro pour les sites content-first. Contactez-nous pour un site ultra-performant.