Astro

1. Origine

Astro est né en 2021 autour de Fred K. Schott et de l'équipe qui gravitait alors autour de Snowpack, avec une question simple : pourquoi un blog ou un site vitrine embarque-t-il le même volume de JavaScript qu'une application ? La version 1.0 est sortie en août 2022, et le framework s'est imposé depuis dans tout l'écosystème du web éditorial.

Le principe fondateur tient en un mot : les îlots. La page est rendue en HTML au moment du build, et seuls les composants réellement interactifs reçoivent leur JavaScript, chacun de leur côté. Le reste de la page n'en envoie aucun, jamais.

‍

2. Utilité

Sur un site vitrine, la majorité des pixels ne fait rien : un titre, une image, un paragraphe, une grille de cartes. Les rendre via un framework qui embarque son propre moteur côté client revient à payer le prix d'une application pour afficher du contenu. Astro inverse le défaut : zéro JavaScript, sauf demande explicite.

Chez Studio Relief, c'est le socle du site. Les pages sont générées en statique au build, une animation ou un carrousel reçoit son script uniquement là où il est utile, et seules trois routes basculent en rendu serveur : l'envoi du formulaire, le dépôt des pièces jointes et la lecture du stockage privé. Le contenu vient de Sanity, l'hébergement de Cloudflare, et le passage de l'un à l'autre se règle par un adaptateur.

‍

3. Fonctionnalités

Astro couvre la chaîne complète d'un site de contenu, du routage au déploiement, sans imposer de bibliothèque d'interface.

• Îlots : client:load, client:visible, client:idle déterminent quand, et si, un composant reçoit son JavaScript
• Rendu hybride : statique par défaut, serveur route par route, sans découper le projet en deux
• Agnostique côté interface : React, Vue, Svelte, Solid ou de simples composants .astro coexistent dans la même page
• Composants .astro : du HTML, une syntaxe de template proche du JSX et un <style> scopé automatiquement au composant
• Collections de contenu typées, alimentées par des fichiers locaux (Markdown, MDX) ou par une source distante comme un CMS
• Routage par fichiers avec routes dynamiques et getStaticPaths() pour générer au build toutes les pages issues du CMS
• View Transitions natives : changements de page animés, sans rechargement complet ni routeur côté client à maintenir
• Adaptateurs de déploiement : Cloudflare, Vercel, Netlify ou Node, en changeant une ligne de configuration
• Optimisation des images intégrée (formats modernes, dimensions, srcset) et balises SEO gérées page par page

‍

4. Cas concrets

→ Sur le site Studio Relief, toutes les pages issues du CMS (portfolio, blog, glossaire, stack) sont générées au build depuis Sanity : chaque URL est un fichier HTML servi depuis le réseau Cloudflare, sans base de données à interroger à la volée. Les rares routes qui ont besoin du serveur sont déclarées individuellement.

→ Sur un projet éditorial à fort volume, Astro permet de garder un affichage instantané tout en conservant des composants interactifs ponctuels : filtres, recherche, carrousel. L'interactivité est payée à l'unité, pas à la page.

‍

5. Prix

Astro est gratuit et open-source sous licence MIT, sans édition payante ni fonctionnalité réservée. Le projet est maintenu par une équipe dédiée et une large communauté de contributeurs. Les seuls coûts d'un projet Astro sont ceux de l'hébergement et des services connectés.

→ astro.build

‍

6. Questions fréquentes

Astro peut-il faire autre chose qu'un site statique ?
Oui. Le rendu serveur s'active route par route : une page peut être générée au build pendant que sa voisine est rendue à la demande, avec accès à la requête, aux cookies et aux variables d'environnement. C'est ce mode hybride qui permet de garder un site quasi entièrement statique tout en gérant un formulaire ou un espace protégé.

Faut-il choisir entre Astro et Next.js ?
Les deux ne répondent pas à la même question. Astro est taillé pour les sites où le contenu domine et où le JavaScript est l'exception. Next.js est taillé pour les applications React où l'interactivité est la règle. Sur un site vitrine ou éditorial, Astro produit des pages plus légères | sur une application connectée, Next.js est mieux outillé.

Peut-on réutiliser des composants React existants ?
Oui. Astro les rend nativement et n'envoie leur JavaScript que si on le demande explicitement avec une directive client:*. Un composant React affiché sans directive est rendu en HTML statique, sans aucun runtime côté client.