Astro vs Next.js: Islands vs Server Components | We.Inc
Astro liefert statisches HTML mit interaktiven Islands, Next.js baut React-Apps mit Server Components. Vergleiche Ausgabemodi, Interaktivität und Hosting und prüfe dann deine Anforderungen.
Astro rendert Seiten zu HTML ohne Client-JavaScript, außer du fügst eine Island mit einer Client-Direktive hinzu, und passt deshalb sehr gut zu Content-Websites. Next.js ist ein React-Framework, in dem Seiten standardmäßig Server Components sind und interaktive Teile per 'use client' aktiviert werden, was zu App-artigen Produkten mit Logins und viel State passt.
Adapter hinzufügen, dann prerender = false oder output: 'server'
Eingebaut beim Ausführen von next start
Verzögerte Server-Teile
server:defer Server Islands
Server-Rendering wird zum Client gestreamt
Hosting-Optionen
Jeder statische Host oder Adapter für Node.js, Netlify, Vercel, Cloudflare
Node.js-Server, Docker, statischer Export oder Adapter
Hake die Anforderungen an, die dein Projekt beschreiben. Jede tendiert aus einem genannten Grund zu Astro oder Next.js, und die Auswertung unten gibt dir eine erste Empfehlung, kein endgültiges Urteil.
Wähle jede Aussage aus, die auf dein Projekt zutrifft.
Lies die Begründung, die unter jeder gewählten Anforderung erscheint.
Sieh dir unten die Auswertung und die Empfehlung an.
Schau dir die Codebeispiele weiter unten an, um zu sehen, wie jedes Framework einen interaktiven Teil hinzufügt.
Content-Websites mit einer Handvoll Widgets sind Astros Stärke. Jede Seite bleibt reines HTML, außer den Islands, die du markierst.
Nimm client:visible für Widgets unterhalb des sichtbaren Bereichs. Astro wartet, bis die Island ins Bild scrollt, bevor es ihr JavaScript lädt.
Setz 'use client' in Next.js so tief wie möglich. Markiere das Suchfeld, nicht das ganze Layout, damit die Client-Bundles klein bleiben.
Du hast schon React-Komponenten? Beide Frameworks können sie nutzen. In Astro installierst du die React-Integration mit npx astro add react.
Häufige Fragen
Kann Astro React-Komponenten verwenden?
Ja. Nach npx astro add react kannst du eine React-Komponente in eine .astro-Seite importieren. Ohne Client-Direktive wird sie nur zu statischem HTML gerendert, füge client:load oder eine andere Direktive hinzu, um sie interaktiv zu machen.
Ist Astro nur für statische Websites?
Nein. Mit installiertem Server-Adapter kann jede Seite per export const prerender = false auf das Vorrendern verzichten, oder du setzt output: 'server', um jede Seite bei Anfrage zu rendern und nur die von dir gewählten vorzurendern.
Sind Astro Islands dasselbe wie React Server Components?
Sie lösen ein ähnliches Problem aus entgegengesetzten Richtungen. Astro startet bei null JavaScript, und du fügst interaktive Islands hinzu. Next.js startet bei serverseitig gerendertem React, und du markierst die Client-Teile. React Server Components selbst schicken ihren Code nie an den Browser.
Was ist besser für einen Blog?
Meistens Astro, weil ein Blog größtenteils aus Text und Bildern besteht, die kein JavaScript brauchen. Next.js kommt mit Blogs ebenfalls gut zurecht und ist die einfachere Wahl, wenn der Blog Teil einer größeren React-App ist.
Was ist besser für ein Dashboard oder eine SaaS-App?
Meistens Next.js. Angemeldete Bildschirme mit Formularen, Live-Daten und geteiltem Client-State spielen die Stärken von React aus, und Route Handlers liegen im selben Projekt.
So funktionieren Astro Islands
Eine Astro-Komponente hat oben einen Script-Bereich, der nur auf dem Server läuft, und darunter ein Template. Sie wird nie auf dem Client gerendert: Das Ergebnis ist HTML, erzeugt zur Build-Zeit oder bei einer Anfrage.
Wenn ein Teil der Seite auf Klicks reagieren soll, setzt du eine Komponente aus React, Svelte, Vue oder einem anderen unterstützten Framework ein und gibst ihr eine Client-Direktive. Nur diese Island lädt JavaScript, und die Direktive entscheidet, wann: sofort, wenn der Browser untätig ist, wenn sie ins Bild scrollt oder wenn eine Media Query zutrifft.
So funktionieren Server Components in Next.js
Im Next.js App Router sind Layouts und Seiten Server Components, sofern nichts anderes angegeben ist. Sie können Datenbanken und Secrets direkt lesen, und ihr Code wird nicht an den Browser geschickt.
Ein 'use client' in einer Datei markiert eine Grenze. Diese Datei, ihre Imports und die Komponenten, die sie rendert, landen im Client-Bundle und werden hydriert, sodass State, Effects und Event-Handler dort funktionieren.
Die Entscheidung treffen
Werden die meisten Seiten eher gelesen als benutzt, starte mit Astro. Werden die meisten Seiten eher benutzt als gelesen oder lebt das Team in React, starte mit Next.js. Gemischte Projekte betreiben oft eine Marketing-Website in Astro und eine App in Next.js auf einer Subdomain.
In beiden einen interaktiven Teil hinzufügen
Astro-Seite mit einer React-Island
Überschrift und Absatz werden als reines HTML ausgeliefert. Nur der LikeButton lädt JavaScript, und das erst, wenn er ins Bild scrollt.
Next.js-Seite mit einer Client Component
Die Seite ist eine Server Component. Die 'use client'-Datei ist der einzige Teil, der im Browser hydriert wird.
Rendering bei Anfrage in Astro
Server-Ausgabe mit einem Node.js-Adapter
Führe zuerst npx astro add node aus. Mit output auf 'server' wird jede Seite bei Anfrage gerendert, außer sie exportiert prerender = true.
Die meisten Seiten sind Artikel, Dokumentation oder Marketingtexte
Astro-Komponenten rendern zu HTML ohne Client-JavaScript, und mehr braucht eine Seite zum Lesen nicht.
Wir wollen Svelte- oder Vue-Komponenten neben React nutzen
Astro unterstützt React, Preact, Svelte, Vue und SolidJS auf derselben Seite.
Interaktivität beschränkt sich auf ein paar Widgets
Client-Direktiven laden JavaScript nur für diese Islands und nur, wenn es nötig ist.
Wir wollen auf einfachem statischem Datei-Hosting hosten
Astro gibt standardmäßig statisch aus, der statische Export von Next.js funktioniert, verzichtet aber auf Funktionen, die einen Server brauchen.
Die meisten Bildschirme liegen hinter einem Login
Angemeldete, datenintensive Bildschirme passen zu React-State, während Server Components die Daten auf dem Server abrufen.
Viele Komponenten teilen sich Client-State
Eine React-App mit Context Providern und Client Components verwaltet geteilten State direkt.
Wir wollen API-Endpunkte im selben Projekt
Route Handlers liegen neben den Seiten und laufen immer dann, wenn die Website auf ihrem Node.js-Server läuft.
Unser Team baut schon alles in React
Next.js ist von oben bis unten React, es gibt also kein zweites Komponentenmodell zu lernen.
Was passt zu deinem Projekt?
Projektanforderungen
Astro: {a}, Next.js: {n}
Wähle die Anforderungen aus, die auf dein Projekt zutreffen.
Tendenz zu Astro.
Tendenz zu Next.js.
Gleichstand: Beides funktioniert, nimm also das, was dein Team kennt.