Astro : Le Framework Web Orienté Contenu

Astro génère du HTML statique pur au build. Le JavaScript n’est chargé que pour les composants explicitement marqués comme interactifs (client:load, client:visible, client:idle). Cela signifie qu’une page Astro moyenne charge moins de 10 kB de JS, contre 200+ kB pour une SPA classique.

---
const posts = await getCollection("blog");
---
<main>
{posts.map(post => <ArticleCard {...post} />)}
</main>
<!-- Pas de JS envoyé au navigateur -->

Les composants interactifs sont des « îles » dans un océan de HTML statique. Chaque île s’hydrate indépendamment, sans affecter le reste de la page. Vous pouvez mixer React pour un compteur, Vue pour un formulaire, et Svelte pour un graphique : tout dans la même page, sans conflit.

<Header />              <!-- Statique : zéro JS -->
<Panier client:load />  <!-- Île React : s'hydrate immédiatement -->
<Chart client:visible /> <!-- Île Svelte : s'hydrate au scroll -->

Les Content Collections sont un système de gestion de contenu type headless CMS, directement dans votre code. Définissez un schéma avec Zod, écrivez en MDX ou Markdown, et Astro valide, type et indexe automatiquement votre contenu. Fini les CMS lourds pour un blog ou une documentation.

const blog = defineCollection({
schema: z.object({
  title: z.string(),
  tags: z.array(z.string()),
  publishDate: z.date(),
}),
});

Astro n’impose pas de framework UI. Vous pouvez utiliser React, Vue, Svelte, Solid, Preact, Lit, Alpine ou Qwik : y compris simultanément dans la même page. Passez des données entre frameworks via les props Astro. Idéal pour les migrations progressives ou les équipes polyglottes.

---
import ReactCard from "./Card.jsx";
import VueCard from "./Card.vue";
---
<ReactCard title="React" client:idle />
<VueCard title="Vue" client:idle />