Astro

Qu'est-ce qu'Astro ?

Astro est un framework web open source pour les sites centrés sur le contenu : blogs, documentation, pages marketing et boutiques. Par défaut, il génère les pages en HTML statique au moment du build et n'envoie du JavaScript au navigateur que pour les parties interactives que vous choisissez, appelées îlots. Vous écrivez les pages sous forme de composants et pouvez y utiliser React et d'autres frameworks d'interface.

La documentation d'Astro indique actuellement la version 7 comme dernière version majeure (consulté en octobre 2026).

Comment fonctionne Astro

Statique d'abord, à la demande si besoin

Le mode de sortie par défaut est statique : les pages et les endpoints sont prérendus en HTML au build, selon le modèle de la génération de sites statiques. Pour rendre une route à chaque requête, vous ajoutez un adaptateur serveur (Node, Netlify, Cloudflare, Vercel et d'autres) et placez export const prerender = false dans la page. Avec output: 'server', vous inversez la valeur par défaut et toutes les pages sont rendues à la demande, comme avec le rendu côté serveur.

Îlots et zéro JavaScript par défaut

Astro retire le JavaScript côté client des composants d'interface, sauf si vous l'activez. Une directive client:* transforme un composant en îlot interactif qui est hydraté séparément : client:load immédiatement, client:idle quand le navigateur est inactif et client:visible quand le composant entre dans la zone visible. Tout ce qui entoure l'îlot reste du HTML simple. Les détails se trouvent dans la documentation d'Astro sur les îlots. Les îlots serveur (server:defer) fonctionnent à l'inverse : un élément dynamique est rendu à part sur le serveur pendant que le reste de la page affiche un espace réservé.

Collections de contenu

Les collections de contenu gèrent des ensembles de contenus similaires, comme des articles de blog. Vous les définissez dans src/content.config.ts avec un loader (glob() lit des fichiers Markdown, MDX, JSON et YAML ; file() lit un seul fichier) et un schéma Zod facultatif qui valide le front matter et génère des types TypeScript. Un fichier qui ne respecte pas le schéma fait échouer le build au lieu d'arriver en production.

Exemple

Sur une page produit, l'en-tête, la description et les images sont du HTML statique. Le bouton « Ajouter au panier » est un composant React avec client:visible : son JavaScript n'est téléchargé que lorsque le visiteur arrive jusqu'à lui. Un bandeau « récemment consultés » qui dépend de l'utilisateur peut être un îlot serveur avec un espace réservé. Le reste du site reste mis en cache sur un CDN.

Erreurs fréquentes

• Mettre client:load sur chaque composant. Cela envoie le même JavaScript qu'une application monopage et supprime l'avantage principal.
• Choisir Astro pour un tableau de bord de type application avec beaucoup d'état partagé côté client. Un framework conçu pour les applications monopages, comme Next.js, peut mieux convenir.
• Oublier l'adaptateur. Sans lui, une page ne peut pas être rendue à la demande.
• Croire que statique veut dire sans rien à tester. Les formulaires, les endpoints d'API, les routes à la demande et les îlots serveur tournent toujours sur un serveur et peuvent ralentir sous la charge.

Astro, tests de performance et surveillance

Un build statique d'Astro servi depuis un CDN a généralement un temps jusqu'au premier octet faible, mais cela se mesure, ne se suppose pas. Suivez les scores Lighthouse et les Core Web Vitals dans le temps avec la surveillance de la vitesse des pages et faites un contrôle ponctuel avec le vérificateur de Core Web Vitals. Pour transformer ces chiffres en limites qui font échouer un build, lisez comment fixer des budgets de performance pour les applications web. Si vous rendez des routes à la demande, un test de charge montre comment elles se comportent avec un trafic simultané. Parmi les autres générateurs, comparez avec Eleventy. Pour le travail général sur la vitesse, voyez le guide de surveillance des Core Web Vitals avec alertes.

Questions fréquentes (FAQ)

Astro est-il un générateur de sites statiques ?

En grande partie, oui. Sa sortie par défaut est du HTML statique construit à l'avance. Il peut aussi rendre des pages à la demande si vous ajoutez un adaptateur serveur : il couvre donc les sites statiques et les sites rendus côté serveur.

Astro est-il bon pour le SEO ?

Les pages arrivent en HTML complet, les moteurs de recherche peuvent donc lire le contenu sans exécuter de JavaScript, et envoyer moins de JavaScript aide les métriques de chargement. Le classement dépend toujours de la qualité du contenu et du reste du site.

Puis-je utiliser React, Vue ou Svelte avec Astro ?

Oui. Astro propose des intégrations pour des frameworks d'interface comme React, et une intégration permet d'utiliser leurs composants comme îlots. Vous pouvez garder l'essentiel de la page en composants Astro et n'hydrater que ce qui demande de l'interaction.

Que sont les îlots d'Astro ?

Un îlot est un composant d'interface interactif au milieu d'une page par ailleurs statique. Il est hydraté séparément du reste de la page, si bien que seul le JavaScript dont il a besoin est chargé.