Astro vs Next.js: islands vs Server Components | We.Inc
Astro levert statische HTML met interactieve islands; Next.js bouwt React-apps met Server Components. Vergelijk outputmodi, interactiviteit en hosting, en test daarna uw behoeften.
Astro rendert pagina's naar HTML zonder client-JavaScript, tenzij u een island met een client-directive toevoegt, en dat maakt het een sterke keuze voor contentsites. Next.js is een React-framework waarin pagina's standaard Server Components zijn en interactieve delen zich aanmelden met 'use client', wat past bij app-achtige producten met logins en veel state.
Voeg een adapter toe, dan prerender = false of output: 'server'
Ingebouwd bij draaien met next start
Uitgestelde serverdelen
server:defer server islands
Server-rendering gestreamd naar de client
Hostingopties
Elke statische host, of adapters voor Node.js, Netlify, Vercel, Cloudflare
Node.js-server, Docker, statische export of adapters
Vink de behoeften aan die uw project beschrijven. Elke behoefte neigt om een genoemde reden naar Astro of Next.js, en de telling hieronder geeft een eerste aanbeveling, geen eindoordeel.
Selecteer elke uitspraak die voor uw project klopt.
Lees de reden die onder elke geselecteerde behoefte verschijnt.
Bekijk de telling en de aanbeveling onderaan.
Gebruik de codevoorbeelden verderop om te zien hoe elk framework een interactief deel toevoegt.
Contentsites met een handvol widgets zijn waar Astro uitblinkt. Elke pagina blijft gewone HTML, behalve de islands die u markeert.
Kies client:visible voor widgets onder de vouw. Astro wacht tot het island in beeld scrollt voordat het de JavaScript laadt.
Duw 'use client' in Next.js zo diep mogelijk. Markeer het zoekveld, niet de hele layout, om clientbundels klein te houden.
Hebt u al React-componenten? Beide frameworks kunnen ze gebruiken. Installeer in Astro de React-integratie met npx astro add react.
Veelgestelde vragen
Kan Astro React-componenten gebruiken?
Ja. Na npx astro add react kunt u een React-component in een .astro-pagina importeren. Zonder client-directive rendert het alleen naar statische HTML; voeg client:load of een andere directive toe om het interactief te maken.
Is Astro alleen voor statische sites?
Nee. Met een serveradapter geïnstalleerd kan elke pagina zich afmelden voor prerendering met export const prerender = false, of u stelt output: 'server' in om elke pagina per request te renderen en alleen de pagina's die u kiest vooraf te renderen.
Zijn Astro islands hetzelfde als React Server Components?
Ze lossen een vergelijkbaar probleem op vanuit tegengestelde richtingen. Astro begint bij nul JavaScript en u voegt interactieve islands toe. Next.js begint bij server-gerenderde React en u markeert de clientdelen. De code van React Server Components zelf gaat nooit naar de browser.
Wat is beter voor een blog?
Meestal Astro, omdat een blog vooral bestaat uit tekst en afbeeldingen die geen JavaScript nodig hebben. Next.js kan ook goed met blogs overweg, en is de makkelijkere keuze als de blog in een grotere React-app zit.
Wat is beter voor een dashboard of SaaS-app?
Meestal Next.js. Schermen achter een login met formulieren, live data en gedeelde client-state spelen in op de sterke punten van React, en Route Handlers zitten in hetzelfde project.
Hoe Astro islands werken
Een Astro-component heeft bovenaan een scriptblok dat alleen op de server draait, met daaronder een template. Het rendert nooit op de client: het resultaat is HTML, gemaakt tijdens de build of per request.
Als een deel van de pagina op klikken moet reageren, zet u er een component uit React, Svelte, Vue of een ander ondersteund framework in en geeft u het een client-directive. Alleen dat island laadt JavaScript, en de directive bepaalt wanneer: meteen, als de browser niets te doen heeft, als het in beeld scrollt of als een media query overeenkomt.
Hoe Next.js Server Components werken
In de App Router van Next.js zijn layouts en pagina's Server Components, tenzij anders aangegeven. Ze kunnen databases en secrets direct lezen, en hun code wordt niet naar de browser gestuurd.
Met 'use client' bovenin een bestand markeert u een grens. Dat bestand, de imports ervan en de componenten die het rendert gaan in de clientbundel en worden gehydrateerd, zodat state, effects en event handlers daar werken.
De knoop doorhakken
Worden de meeste pagina's gelezen in plaats van gebruikt, begin dan met Astro. Worden de meeste pagina's gebruikt in plaats van gelezen, of leeft het team in React, begin dan met Next.js. Gemengde sites draaien vaak een marketingsite in Astro en een app in Next.js op een subdomein.
In elk één interactief deel toevoegen
Astro-pagina met een React-island
De kop en de alinea gaan mee als gewone HTML. Alleen de LikeButton laadt JavaScript, en pas wanneer die in beeld scrollt.
Next.js-pagina met een Client Component
De pagina is een Server Component. Het 'use client'-bestand is het enige deel dat in de browser wordt gehydrateerd.
Per request renderen in Astro
Serveroutput met een Node.js-adapter
Draai eerst npx astro add node. Met output op 'server' rendert elke pagina per request, tenzij ze prerender = true exporteert.
De meeste pagina's zijn artikelen, documentatie of marketingteksten
Astro-componenten renderen naar HTML zonder client-JavaScript, en meer heeft een leespagina niet nodig.
We willen Svelte- of Vue-componenten naast React gebruiken
Astro ondersteunt React, Preact, Svelte, Vue en SolidJS op dezelfde pagina.
Interactiviteit beperkt zich tot een paar widgets
Client-directives laden alleen JavaScript voor die islands, en alleen wanneer dat nodig is.
We willen hosten op gewone statische bestandshosting
Astro-output is standaard statisch; de statische export van Next.js werkt, maar laat functies vallen die een server nodig hebben.
De meeste schermen zitten achter een login
Schermen achter een login met veel data passen bij React-state, met Server Components die data op de server ophalen.
Veel componenten delen client-state
Een React-app met context providers en Client Components gaat direct om met gedeelde state.
We willen API-endpoints in hetzelfde project
Route Handlers staan naast pagina's en draaien zodra de site op zijn Node.js-server draait.
Ons team bouwt al alles in React
Next.js is van boven tot onder React, dus er is geen tweede componentmodel om te leren.
Welke past bij uw project?
Projectbehoeften
Astro: {a}, Next.js: {n}
Selecteer de behoeften die op uw project van toepassing zijn.
Neig naar Astro.
Neig naar Next.js.
Gelijkspel: beide werken, dus kies degene die uw team kent.