Astro est un framework web moderne qui génère des pages HTML statiques en supprimant par défaut tout JavaScript superflu, ce qui le rend exceptionnellement rapide pour les sites orientés contenu. Si tu as déjà entendu parler de Next.js ou de Vue.js, tu sais que les frameworks modernes ont tendance à envoyer beaucoup de JavaScript au navigateur. Astro fait exactement l’inverse : il n’envoie que ce qui est strictement nécessaire.
En 2026, Astro s’est imposé comme l’une des références pour créer des blogs, des portfolios, des sites de documentation ou des landing pages. Et la bonne nouvelle : tu n’as pas besoin d’être un développeur senior pour t’y mettre.
C’est quoi Astro exactement, et pourquoi ça change la donne ?
Astro est un générateur de sites statiques (SSG) qui adopte une philosophie appelée « Zero JS by default » : par défaut, aucun JavaScript n’est envoyé au navigateur, sauf si tu le demandes explicitement.
Dans la plupart des frameworks comme React ou Vue.js, le navigateur reçoit un gros paquet JavaScript qui reconstruit l’interface côté client. C’est ce qu’on appelle l’hydratation. Ça fonctionne bien pour les applications interactives, mais c’est souvent une sur-ingénierie pour un blog ou un site vitrine.
Astro résout ce problème avec son concept d’îles (Islands Architecture). Imagine une page HTML statique avec quelques petits « îlots » interactifs : un menu hamburger, un formulaire de contact, un carrousel. Seules ces zones reçoivent du JavaScript. Le reste est du HTML pur, servi instantanément.
Résultat : des scores Lighthouse proches de 100/100 sans effort particulier. Pour le SEO et l’expérience utilisateur, c’est un avantage énorme.
À qui s’adresse Astro concrètement ?
Astro est fait pour toi si tu veux créer un site orienté contenu sans partir sur une usine à gaz. Voici les cas d’usage où il brille vraiment :
- Blogs et sites de contenu (articles, tutoriels, documentation)
- Portfolios de développeurs ou de designers
- Landing pages et sites vitrines
- Sites de e-commerce simples
- Documentation technique de projets open source
Si tu veux créer une application web complexe avec beaucoup d’interactivité (genre un tableau de bord, un réseau social, une app SaaS), Astro n’est probablement pas le bon choix. Pour ça, Next.js sera plus adapté.
Comment installer Astro et créer ton premier projet ?
Astro s’installe en quelques secondes via npm, le gestionnaire de paquets de Node.js, et propose un assistant CLI qui guide chaque étape.
Avant de commencer, assure-toi d’avoir Node.js installé sur ta machine. Ensuite, ouvre ton terminal et tape :
# Crée un nouveau projet Astro
npm create astro@latest mon-site
# Entre dans le dossier
cd mon-site
# Lance le serveur de développement
npm run devL’assistant te pose quelques questions : tu veux un projet vide, un blog, ou un projet avec des exemples ? Pour débuter, choisis le template « blog » ou « minimal ». Astro démarre ensuite sur http://localhost:4321. Ouvre ton navigateur et tu verras ton site fonctionner en temps réel.
Quelle est la structure d’un projet Astro ?
La structure d’un projet Astro est simple et intuitive : chaque fichier dans le dossier src/pages/ devient automatiquement une page de ton site.
Voici ce que tu trouveras dans un projet typique :
| Dossier / Fichier | Rôle | Exemple |
|---|---|---|
| src/pages/ | Pages du site (routing automatique) | index.astro → page d’accueil |
| src/components/ | Composants réutilisables | Header.astro, Footer.astro |
| src/layouts/ | Mises en page communes | BaseLayout.astro |
| public/ | Fichiers statiques servis tels quels | images, favicon, fonts |
| astro.config.mjs | Configuration du projet | intégrations, options de build |
Un fichier .astro ressemble à ça :
---
// Zone "frontmatter" : ici tu écris du JavaScript côté serveur
const titre = "Bonjour depuis Astro";
---
<!-- Zone HTML : ce qui sera envoyé au navigateur -->
<h1>{titre}</h1>
<p>Ce site est généré statiquement. Aucun JS inutile !</p>La section entre les trois tirets (---) s’exécute uniquement au moment du build, côté serveur. Elle n’est jamais envoyée au navigateur. C’est là toute la magie d’Astro.
Astro est-il compatible avec React, Vue ou d’autres frameworks ?
L’un des atouts majeurs d’Astro est son agnosticisme : tu peux utiliser des composants React, Vue, Svelte, SolidJS ou même Lit dans le même projet, grâce au système d’intégrations officiel.
Concrètement, si tu as déjà des composants React, tu peux les réutiliser dans Astro sans tout réécrire. Tu installes l’intégration React en une commande :
# Ajoute le support React dans Astro
npx astro add reactEnsuite, tu peux utiliser ton composant React dans une page Astro et choisir QUAND il doit s’hydrater côté client grâce aux directives client: :
---
import MonComposantReact from '../components/MonComposant.jsx';
---
<!-- Hydratation uniquement quand l'élément devient visible -->
<MonComposantReact client:visible />Les directives disponibles sont client:load (immédiat), client:idle (quand le navigateur est libre), client:visible (quand l’élément apparaît à l’écran). C’est ce système qui permet de ne charger du JavaScript que là où c’est vraiment utile.
Comment Astro gère-t-il le contenu comme les articles de blog ?
Astro intègre nativement un système appelé Content Collections, qui permet de gérer tes articles en Markdown ou MDX de façon structurée et typée.
Tu crées un dossier src/content/blog/, tu y mets tes fichiers .md, et Astro les transforme automatiquement en pages. Chaque article peut avoir un « frontmatter » avec des métadonnées :
---
title: "Mon premier article"
date: 2026-01-15
description: "Un article écrit en Markdown"
---
# Mon premier article
Bienvenue sur mon blog généré avec Astro !Astro vérifie même que tes métadonnées respectent un schéma que tu définis. Si tu oublies un champ obligatoire comme le titre, Astro t’affiche une erreur au build. C’est comme avoir un petit garde-fou intégré.
Pour le style de tes pages, tu peux combiner Astro avec Tailwind CSS très facilement via une commande npx astro add tailwind. Les deux outils sont parfaitement complémentaires.
Où déployer un site Astro gratuitement ?
Astro génère des fichiers HTML statiques au moment du build, ce qui signifie que tu peux l’héberger gratuitement sur n’importe quelle plateforme de déploiement statique.
Les options les plus populaires en 2026 :
- Vercel : connexion directe avec ton repo GitHub, déploiement automatique à chaque push
- Netlify : similaire à Vercel, très populaire pour les sites statiques
- Cloudflare Pages : gratuit, performant, CDN mondial inclus
- GitHub Pages : gratuit si ton projet est open source
Le workflow typique : tu codes en local, tu pousses sur GitHub, et la plateforme de déploiement détecte automatiquement qu’il s’agit d’un projet Astro et le déploie en quelques secondes. Pas besoin de configurer un serveur.
En résumé : Astro
Astro est un framework web taillé pour les sites orientés contenu qui veulent des performances maximales sans complexité inutile. Son approche « Zero JS by default » et son architecture en îles te permettent de créer des sites ultra-rapides, compatibles avec React, Vue ou Svelte, et déployables gratuitement en quelques minutes. Si tu veux créer un blog, un portfolio ou un site vitrine sans te noyer dans la configuration, Astro est probablement le meilleur point de départ en 2026. Et si tu veux comprendre comment fonctionne une API pour alimenter ton site Astro en données externes, c’est une compétence naturelle à acquérir ensuite.
Questions fréquentes sur Astro
Astro c’est gratuit ?
Oui, Astro est un framework open source totalement gratuit. Tu peux l’utiliser pour des projets personnels ou professionnels sans payer de licence. Les coûts éventuels viennent uniquement de l’hébergement, mais des options gratuites comme Vercel ou Netlify existent pour les petits projets.
Faut-il connaître React pour utiliser Astro ?
Non, pas du tout. Astro a sa propre syntaxe de composants via les fichiers .astro, qui est très proche du HTML classique. Tu peux créer un site complet sans toucher à React. Si tu connais déjà React, c’est un plus car tu peux réutiliser tes composants existants, mais ce n’est pas une condition.
Quelle est la différence entre Astro et Next.js ?
Astro est optimisé pour les sites orientés contenu avec peu d’interactivité : blogs, portfolios, sites vitrines. Next.js est plus adapté aux applications web complexes avec beaucoup d’interactivité côté client, d’authentification ou de données en temps réel. Pour le SEO et les performances statiques, Astro est souvent supérieur. Pour une vraie app web, Next.js reste la référence.
Astro est-il bon pour le SEO ?
Astro est excellent pour le SEO, justement parce qu’il génère du HTML statique que les robots de Google peuvent lire sans problème. Pas de JavaScript à interpréter, pas de délai de rendu. Les scores Core Web Vitals sont naturellement élevés, ce qui favorise le classement dans les résultats de recherche.
Peut-on créer un blog entier avec Astro ?
Oui, et c’est même l’un des cas d’usage pour lequel Astro est le plus recommandé. Le système de Content Collections te permet de gérer tes articles en Markdown, de les organiser par catégorie, et de générer automatiquement les pages correspondantes. Il existe même des thèmes Astro dédiés aux blogs que tu peux installer en une commande.
Astro fonctionne-t-il avec TypeScript ?
Oui, Astro supporte TypeScript nativement. Quand tu crées un projet, tu peux choisir de l’activer dès le départ. Astro utilise TypeScript en interne pour le système de Content Collections, notamment pour valider le schéma de tes articles. Si tu veux en savoir plus sur TypeScript, tu peux consulter notre article sur TypeScript vs JavaScript pour comprendre si ça vaut le coup de l’apprendre.