Astro vs Next.js : îlots contre Server Components | We.Inc
Astro livre du HTML statique avec des îlots interactifs ; Next.js construit des applications React avec des Server Components. Comparez les modes de sortie, l'interactivité et l'hébergement, puis testez vos besoins.
Astro génère les pages en HTML sans JavaScript côté client, sauf si vous ajoutez un îlot avec une directive client, ce qui le rend très adapté aux sites de contenu. Next.js est un framework React où les pages sont des Server Components par défaut et où les parties interactives s'activent avec 'use client', ce qui convient aux produits proches d'une application, avec connexion et beaucoup de state.
Astro et Next.js comparés
Sujet
Astro
Sortie par défaut
HTML statique, prérendu au build
React rendu côté serveur ; export statique en option
Ajouter un adaptateur, puis prerender = false ou output: 'server'
Intégré avec next start
Parties serveur différées
Îlots serveur server:defer
Rendu serveur envoyé en streaming au client
Options d'hébergement
N'importe quel hébergeur statique, ou adaptateurs Node.js, Netlify, Vercel, Cloudflare
Serveur Node.js, Docker, export statique ou adaptateurs
Cochez les besoins qui décrivent votre projet. Chacun penche vers Astro ou Next.js pour une raison indiquée, et le décompte ci-dessous donne une recommandation de départ, pas un verdict définitif.
Sélectionnez chaque affirmation vraie pour votre projet.
Lisez la raison qui apparaît sous chaque besoin sélectionné.
Consultez le décompte et la recommandation en bas.
Utilisez les exemples de code plus bas pour voir comment chaque framework ajoute une partie interactive.
Les sites de contenu avec quelques widgets sont le terrain idéal d'Astro. Chaque page reste du simple HTML, sauf les îlots que vous marquez.
Choisissez client:visible pour les widgets sous la ligne de flottaison. Astro attend que l'îlot apparaisse à l'écran avant de charger son JavaScript.
Dans Next.js, placez 'use client' le plus bas possible dans l'arbre. Marquez le champ de recherche, pas tout le layout, pour garder des bundles client légers.
Vous avez déjà des composants React ? Les deux frameworks peuvent les utiliser. Dans Astro, installez l'intégration React avec npx astro add react.
Questions fréquentes
Astro peut-il utiliser des composants React ?
Oui. Après npx astro add react, vous pouvez importer un composant React dans une page .astro. Sans directive client, il est rendu uniquement en HTML statique ; ajoutez client:load ou une autre directive pour le rendre interactif.
Astro ne sert-il qu'aux sites statiques ?
Non. Avec un adaptateur serveur installé, n'importe quelle page peut renoncer au prérendu avec export const prerender = false, ou vous pouvez définir output: 'server' pour rendre chaque page à la requête et ne prérendre que celles de votre choix.
Les îlots Astro sont-ils la même chose que les React Server Components ?
Ils résolvent un problème similaire par des chemins opposés. Astro part de zéro JavaScript et vous ajoutez des îlots interactifs. Next.js part de React rendu côté serveur et vous marquez les parties client. Les React Server Components eux-mêmes n'envoient jamais leur code au navigateur.
Lequel est le meilleur pour un blog ?
En général Astro, car un blog est surtout du texte et des images qui n'ont pas besoin de JavaScript. Next.js gère aussi bien les blogs, et c'est le choix le plus simple si le blog fait partie d'une application React plus large.
Lequel est le meilleur pour un tableau de bord ou une application SaaS ?
En général Next.js. Les écrans connectés avec formulaires, données en direct et state client partagé exploitent les points forts de React, et les Route Handlers se trouvent dans le même projet.
Comment fonctionnent les îlots Astro
Un composant Astro a en haut un bloc de script qui ne s'exécute que sur le serveur, et un template en dessous. Il n'est jamais rendu côté client : le résultat est du HTML, produit au build ou à la requête.
Quand une partie de la page doit réagir aux clics, vous y placez un composant React, Svelte, Vue ou d'un autre framework pris en charge et vous lui donnez une directive client. Seul cet îlot charge du JavaScript, et la directive décide quand : immédiatement, quand le navigateur est inactif, quand il apparaît à l'écran ou quand une media query correspond.
Comment fonctionnent les Server Components de Next.js
Dans l'App Router de Next.js, les layouts et les pages sont des Server Components sauf indication contraire. Ils peuvent lire directement les bases de données et les secrets, et leur code n'est pas envoyé au navigateur.
Ajouter 'use client' à un fichier marque une frontière. Ce fichier, ses imports et les composants qu'il affiche vont dans le bundle client et sont hydratés, donc le state, les effets et les gestionnaires d'événements y fonctionnent.
Faire le choix
Si la plupart des pages sont lues plutôt qu'utilisées, commencez avec Astro. Si la plupart des pages sont utilisées plutôt que lues, ou si l'équipe vit dans React, commencez avec Next.js. Les sites mixtes font souvent tourner un site vitrine en Astro et une application en Next.js sur un sous-domaine.
Ajouter une partie interactive dans chacun
Page Astro avec un îlot React
Le titre et le paragraphe sont livrés en simple HTML. Seul LikeButton charge du JavaScript, et seulement une fois qu'il apparaît à l'écran.
Page Next.js avec un Client Component
La page est un Server Component. Le fichier 'use client' est la seule partie hydratée dans le navigateur.
Rendu à la requête dans Astro
Sortie serveur avec un adaptateur Node.js
Lancez d'abord npx astro add node. Avec output défini à 'server', chaque page est rendue à la requête sauf si elle exporte prerender = true.
La plupart des pages sont des articles, de la documentation ou des textes marketing
Les composants Astro sont rendus en HTML sans JavaScript client, ce qui suffit à une page de lecture.
Nous voulons utiliser des composants Svelte ou Vue à côté de React
Astro prend en charge React, Preact, Svelte, Vue et SolidJS sur la même page.
L'interactivité se limite à quelques widgets
Les directives client ne chargent du JavaScript que pour ces îlots, et seulement quand c'est nécessaire.
Nous voulons héberger sur un simple hébergement de fichiers statiques
La sortie d'Astro est statique par défaut ; l'export statique de Next.js fonctionne mais perd les fonctionnalités qui ont besoin d'un serveur.
La plupart des écrans sont derrière une connexion
Les écrans connectés et riches en données conviennent au state React, avec des Server Components qui récupèrent les données sur le serveur.
Beaucoup de composants partagent un state client
Une application React avec des providers de context et des Client Components gère directement le state partagé.
Nous voulons des endpoints d'API dans le même projet
Les Route Handlers vivent à côté des pages et s'exécutent dès que le site tourne sur son serveur Node.js.
Notre équipe construit déjà tout en React
Next.js est du React de bout en bout, il n'y a donc pas de second modèle de composants à apprendre.
Lequel convient à votre projet ?
Besoins du projet
Astro : {a}, Next.js : {n}
Sélectionnez les besoins qui s'appliquent à votre projet.
Penchez pour Astro.
Penchez pour Next.js.
Égalité : les deux conviennent, choisissez donc celui que votre équipe connaît.