Astro est un framework JavaScript permettant de faire du Server Side Rendering et du Static Content Generation. Ça n’a rien d’une nouveauté, et il existe une tonne d’outils pour ça sur le web dans différents langages. Mais il faut avouer qu’Astro a quelques cordes à son arc pour nous séduire et c’est là le but de ce petit article !

Zéro JavaScript par défaut

Le principe est simple mais puissant : Astro génère du HTML statique sans JavaScript côté client par défaut. Votre site charge uniquement ce dont il a réellement besoin. Fini les bundles JavaScript de plusieurs méga-octets juste pour afficher du contenu statique !

Cette approche “zero-JS” garantit des performances optimales dès le départ. Si vous n’avez pas besoin d’interactivité sur une page, elle sera livrée en pur HTML/CSS. Rapide, léger, efficace.

Islands Architecture

Lorsque vous avez besoin d’interactivité, Astro utilise le pattern Islands Architecture. Au lieu d’hydrater toute la page avec JavaScript (comme le font Next.js ou Nuxt), vous marquez uniquement les composants interactifs qui en ont besoin.

<!-- Ce composant est du pur HTML -->
<Header />

<!-- Seul ce compteur sera interactif -->
<Counter client:load />

<!-- Ce composant est du pur HTML -->
<Footer />

Voici une explication plus détaillée du pattern Island Architecture.

Résultat ? Vous n’envoyez du JavaScript au client que là où c’est nécessaire. Le reste de la page reste du bon vieux HTML pur qui s’affiche très rapidement.

Et plusieurs directives permettent de manipuler les composants réactifs avec précision.

• client:load charge le composant dès que la page est chargée.
• client:idle charge le composant lorsque le navigateur est inactif.
• client:visible permet de charger le composant uniquement lorsqu’il entre dans le viewport.

Je vous ai mis les plus courantes, mais il en existe d’autres que vous pouvez retrouver dans la documentation officielle.

Un générateur Multi-Framework

L’un des grands atouts d’Astro, c’est sa compatibilité avec la majorité des frameworks JavaScript. Vous pouvez utiliser React, Vue, Svelte, Solid, Preact, Alpine.js ! Et la encore, c’est très facile à configurer car il suffit d’ajouter l’intégration qui vous convient parmi une liste très complète

# Ajouter React à votre projet Astro
npx astro add react

# Ou Vue
npx astro add vue

Le but n’est pas d’utiliser tous les frameworks sur le même projet car la complexité de votre projet sera multipliée par le nombre de technologies que vous utilisez mais néanmoins, ça permet de pouvoir utiliser Astro tout en étant framework agnostic.

Et dans le cas d’une Migration progressive, c’est un atout majeur. Vous pouvez migrer une application existante vers Astro petit à petit, en intégrant vos composants React ou Vue actuels sans avoir à tout réécrire d’un coup.

---
import ReactCounter from '../components/ReactCounter.jsx';
import VueChart from '../components/VueChart.vue';
import SvelteForm from '../components/SvelteForm.svelte';
---

<div>
  <h1>Un exemple de page multi-framework</h1>
  <ReactCounter client:load />
  <VueChart client:visible />
</div>

Collections de contenu

Astro est fait pour gérer du contenu, il intègre donc un système de collection de contenu très bien pensé. Tu peux définir tes collections de contenu et valider que ton contenu respecte un schéma de validation. Là encore, on fait dans le pragmatisme car la validation se fait avec zod. C’est un outil très connu qui permet de valider des objets en fonction d’un schéma, et qui permet aussi d’inférer des types TypeScript. Dans mon cas, j’ai plusieurs collections pour mes articles, mes projets, etc.

import { defineCollection, z } from "astro:content";
import { glob } from "astro/loaders";

const blog = defineCollection({
	loader: glob({ base: "./src/content/blog", pattern: "**/*.{md,mdx}" }),
	schema: ({ image }) =>
		z.object({
			title: z.string(),
			description: z.string(),
			pubDate: z.coerce.date(),
			heroImage: image().optional(),
			tags: z.array(z.string()).optional(),
		}),
});

Si dans mon en-tête d’un de mes articles de blog, je n’ai pas les bons champs, alors le build va échouer.

Et ça, c’est quand même super pratique !

Pour mon blog, les en-têtes ressembleraient à quelque chose comme ça:

---
title: Astro - Un générateur de sites statiques moderne et performant
description: Créer un site web rapide et optimisé avec Astro, un générateur de sites statiques moderne qui utilise le pattern de rendu "Islands Architecture".
pubDate: '2026-01-21'
tags: ['javascript', 'outils', 'dev']
heroImage: '../../assets/astro/image.png'
---

Salut, il faut que je vous parle d'Astro...

Performance et optimisations

Astro est conçu pour la performance dès le départ. Voici quelques-unes des optimisations intégrées :

• Optimisation des images : Astro peut automatiquement optimiser et redimensionner les images pour différents appareils, réduisant ainsi le temps de chargement, en utilisant des librairies bien connues comme Sharp ou SVGO.
• Préchargement intelligent : Astro précharge les ressources critiques pour améliorer les performances de rendu.
• Support natif du TypeScript : Pas besoin de configuration supplémentaire, Astro supporte TypeScript nativement.

Et grâce au pattern Island Architecture, seul le JavaScript nécessaire est chargé, ce qui réduit considérablement la taille des bundles.

SEO & Accessibilité

Côté SEO et accessibilité, là encore Astro fait du bon boulot. En générant du HTML statique propre et sémantique, les moteurs de recherche peuvent facilement indexer votre contenu. Astro intègre également des intégrations pour gérer les balises méta, les sitemaps, et autres bonnes pratiques SEO.

Conclusion

Astro est donc un outil très simple qui utilise tout ce qui se fait de mieux dans le développement JavaScript moderne, tout en simplifiant énormément la courbe d’apprentissage. Ils n’ont pas cherché à réinventer une énième façon de faire des schémas de validation, ou de l’optimisation d’images. Non, ils ont juste utilisé les packages les plus pertinents autour d’une solution simple de SSR & SSG, et c’est redoutable !

Pour l’occasion, j’ai refait mon portfolio en Astro, mon précédent site était en Next.js et je souhaitais changer car… c’était quand même lourd juste pour un blog ! Next.js avance vite, et chaque mise à jour apporte son lot de changements et de dépréciations qui sont assez contraignants dans le simple cadre d’un petit site personnel comme le mien.

En tout cas la migration s’est faite super rapidement car tout mon contenu était déjà géré en Markdown, j’ai donc juste eu à m’adapter à l’intégration Astro & MDXJS. J’en ai profité pour faire un bon coup de design, avec un style qui collait plus à mes envies, et voilà :D !