Astro vs Next.js : Lequel choisir pour votre projet en 2025 ?

J'utilise Next.js depuis 2020. Quand Astro est sorti, j'ai d'abord pensé que c'était juste un énième générateur de sites statiques. Puis j'ai migré un blog client de Next.js vers Astro. Le bundle JavaScript est passé de 180 KB à 0 KB. Zéro.

Ça m'a forcé à vraiment comprendre la différence entre ces deux outils.

La philosophie fondamentale

Next.js part du principe que votre site est une application React. Chaque page est un composant React, rendu côté serveur puis hydraté côté client. Même si votre page est 100% statique, React est chargé.

Astro part du principe inverse : votre site est du HTML statique par défaut. JavaScript n'est ajouté que là où vous en avez explicitement besoin, via les "islands" d'interactivité.

Cette différence philosophique a des implications énormes sur les performances.

Performance : les chiffres réels

Pour un blog de 50 articles, voici ce que j'ai mesuré :

Métrique	Next.js (App Router)	Astro
Bundle JS (page article)	89 KB	0 KB
First Contentful Paint	1.2s	0.6s
Time to Interactive	1.8s	0.6s
Lighthouse Performance	92	100

Astro gagne sur un site de contenu. C'est logique : il n'envoie pas de JavaScript quand il n'y en a pas besoin.

Mais attention : ces chiffres concernent un blog sans interactivité complexe. Dès qu'on ajoute des fonctionnalités dynamiques, la comparaison change.

Quand choisir Astro

Sites de contenu

Blogs, documentations, portfolios, sites vitrines. Si votre site affiche principalement du contenu avec peu d'interactivité, Astro est imbattable. Le HTML généré est minimal, les pages chargent instantanément.

Sites marketing

Landing pages, sites institutionnels, pages de vente. La performance maximale améliore les conversions. Astro permet d'atteindre des scores Lighthouse de 100 sans effort.

Intégration avec plusieurs frameworks

Astro permet d'utiliser React, Vue, Svelte, et Solid dans le même projet. Si votre équipe a des compétences variées ou si vous migrez progressivement, c'est un avantage unique.

---
// page.astro
import ReactComponent from './ReactComponent.jsx';
import VueComponent from './VueComponent.vue';
---

<ReactComponent client:load />
<VueComponent client:visible />

Quand choisir Next.js

Applications interactives

Dashboards, applications SaaS, plateformes avec beaucoup d'état côté client. Next.js est conçu pour ça. L'écosystème React est mature, les patterns sont établis.

E-commerce complexe

Paniers persistants, filtres dynamiques, personnalisation en temps réel. Ces fonctionnalités nécessitent du JavaScript côté client de toute façon. Autant avoir un framework optimisé pour ça.

Équipe React existante

Si votre équipe maîtrise React et son écosystème, rester sur Next.js a du sens. La courbe d'apprentissage d'Astro est faible, mais il y a quand même une adaptation.

API intégrée

Next.js permet de créer des API routes facilement. Astro peut aussi le faire maintenant, mais l'écosystème Next.js est plus riche pour les backends.

Les islands d'Astro vs les Server Components de Next.js

Les deux frameworks tentent de résoudre le même problème : envoyer moins de JavaScript au client.

Astro Islands : par défaut, aucun JavaScript. Vous ajoutez client:load ou client:visible pour hydrater sélectivement certains composants.

<!-- Rendu statique, pas de JS -->
<Header />

<!-- Hydraté au chargement -->
<SearchBar client:load />

<!-- Hydraté quand visible -->
<Comments client:visible />

Next.js Server Components : par défaut, Server Components (pas d'hydratation). Vous ajoutez "use client" pour les composants qui ont besoin d'interactivité.

Les deux approches sont similaires dans le résultat. La différence : Astro part d'un modèle mental "HTML first", Next.js part de "React first".

L'écosystème et la communauté

Next.js a l'avantage de l'ancienneté. Plus de tutoriels, plus de packages, plus de réponses sur Stack Overflow. Vercel investit massivement dans la documentation et les exemples.

Astro grandit rapidement. La communauté est active, la documentation est excellente. Mais vous trouverez moins de ressources pour les cas edge.

Mon approche personnelle

Quand un client me demande un site vitrine ou un blog, je propose Astro. La performance est meilleure, le développement est plus simple, l'hébergement est moins cher (pages statiques vs serverless).

Quand un client a besoin d'une application avec authentification, état global, interactions complexes, je reste sur Next.js. L'écosystème React est irremplaçable pour ces cas.

Pour un site e-commerce, ça dépend de la complexité. Un catalogue simple avec Astro + Snipcart. Une boutique complète avec Next.js + une solution comme Shopify en headless.

Migration entre les deux

Passer de Next.js à Astro est relativement simple pour un site de contenu. Les composants React fonctionnent dans Astro. Il suffit de :

1. Convertir les pages en fichiers .astro
2. Garder les composants React pour les parties interactives
3. Ajouter client:load aux composants qui ont besoin d'hydratation

Dans l'autre sens (Astro vers Next.js), c'est plus complexe. Les composants .astro n'ont pas d'équivalent direct dans React.

Conclusion

Astro et Next.js ne sont pas vraiment concurrents. Ils répondent à des besoins différents.

• Contenu statique avec performance maximale → Astro
• Application interactive avec écosystème React → Next.js
• Blog avec quelques fonctionnalités dynamiques → Les deux fonctionnent, Astro sera plus léger
• SaaS, dashboard, e-commerce complexe → Next.js

Ne choisissez pas en fonction de ce qui est "à la mode". Choisissez en fonction de ce que vous construisez réellement.