Korte versie
Astro bouwt standaard statische HTML en voegt JavaScript toe waar interactie nodig is. Dat geeft contentrijke sites een lichte basis. Next.js biedt een React-framework voor applicaties met veel interactie, ingelogde gebruikers en serverlogica, maar kan ook statische pagina's leveren. Voor een site met een vertrouwd beheerdashboard kan een klassiek CMS beter passen. Kies op basis van de functies en het onderhoud van je project.
Voor een marketingwebsite kies ik vaak Astro; voor een webapp met veel interactie ligt Next.js meer voor de hand. Maar die keuze is niet bij elk project dezelfde. Wie vooral een vertrouwd beheerdashboard nodig heeft, kan met een klassiek CMS beter af zijn. Hieronder vergelijk ik de architectuur, praktijkdata en het werk dat elke keuze van je team vraagt.
Waar gaan Astro en Next.js eigenlijk over?
Astro vertrekt vanuit content. Standaard rendert het pagina’s tijdens de build naar gewone HTML; serverrendering is ook mogelijk. Waar interactie nodig is, zoals bij een zoekveld of kaart, kun je een eiland met JavaScript toevoegen. Statische componenten hoeven geen JavaScript mee te sturen. Dat beperkt het werk in de browser, maar garandeert geen goede Core Web Vitals: beelden, scripts en de verdere uitvoering tellen mee. Astro is niet gebonden aan één UI-bibliotheek; je kunt componenten uit React, Svelte of Vue gebruiken. De Astro-documentatie legt de nadruk op contentrijke websites en het beperken van onnodig JavaScript.
Astro is the web framework for building content-driven websites like blogs, marketing, and e-commerce.
Next.js is een framework bovenop React voor volledige webapplicaties, met serverrendering, API-routes, Proxy (voorheen Middleware) en ondersteuning voor authenticatiepatronen. Dat brengt meer keuzes mee, onder meer rond client components, hydration en caching. Serverfuncties vragen een runtime; een geschikte statische export niet. Hoeveel JavaScript de bezoeker krijgt, hangt af van de implementatie. De Next.js-documentatie omschrijft het als: “Next.js is a React framework for building full-stack web applications”.
Deze website draait op Astro 7 met Content Collections en content in Git. We hebben veel content, weinig ingewikkelde interactie en hoge snelheidseisen. Hoe zo’n site zonder CMS werkt, met MDX- en JSON-bestanden in Git, lees je in Zonder CMS: Astro Content Collections in de praktijk.
Wat de praktijkdata laat zien: 69% tegenover 33%
De meetgroep achter de percentages
Het HTTP Archive Tech Report vergelijkt technologieën op basis van het Chrome UX Report (CrUX). Dat is praktijkdata van deelnemende Chrome-gebruikers, in de officiële documentatie field data genoemd. De cijfers hieronder gaan over mobiel gebruik van origins: combinaties van protocol, hostnaam en poort, met meerdere pagina’s samen. Ze beschrijven niet één gekozen URL of alle websites die een framework gebruiken.
In juli 2026 haalde 69% van de 38.870 gemeten mobiele Astro-origins goede Core Web Vitals. De 40.645 mobiele Astro-origins die hetzelfde rapport voor FCP vermeldt, vormen een andere meetgroep, niet de noemer van het gezamenlijke Core Web Vitals-resultaat. WordPress kwam uit op 49%, Gatsby op 45%, Next.js op 33% en Nuxt.js op 28%. De hele percentages zijn naar beneden afgerond. Voor Astro en Next.js rapporteert de bron 69,81% en 33,89%: ongeveer 35,92 procentpunten verschil.
Aandeel gemeten origins met goede Core Web Vitals
HTTP Archive · juli 2026 · mobiel · wereldwijd
Goede Core Web Vitals betekent dat LCP, INP en CLS elk op het 75e percentiel binnen hun eigen grens vallen. Bij LCP betekent p75 bijvoorbeeld dat minstens 75% van de gemeten paginaladingen op of onder die waarde zit. Het gaat niet om alle bezoekers of noodzakelijk dezelfde 75% bij elke metriek. CrUX kent bovendien voorwaarden voor deelname en gegevensdekking.
Wat je wel en niet uit de vergelijking kunt afleiden
Dit is geen gecontroleerde labtest. De frameworks worden voor verschillende soorten websites gebruikt en de meetgroepen zijn niet even groot. Ook Vercel benoemt dat verschil: Astro wordt vaak voor contentwebsites gekozen. De grafiek toont een verschil tussen de gemeten groepen, maar isoleert niet het effect van het framework.
De architectuur geeft Astro wel een lichte basis: statische componenten sturen geen JavaScript naar de browser; interactieve eilanden laden het waar nodig. Minder JavaScript beperkt het ontleden en uitvoeren van code op een telefoon. Ook Next.js kan goede Core Web Vitals halen, met aandacht voor client components, hydration en de omvang van JavaScriptbundels.
Naast die brede praktijkdata meten we onze eigen sites maandelijks met labtests. Op 2 september 2026 hadden de twaalf andere casesites een mediaan van 98,5/100 voor hun beste mobiele PageSpeed-score van september tot die datum. De eerder vermelde 923 milliseconden voor de snelste LCP is niet terug te vinden in die snapshots; de controleerbare Lab-LCP is 937 milliseconden. Dit zijn productiesites, maar hun labscores zijn geen CrUX-resultaten. Beelden, fonts, externe scripts en de uitvoering bepalen mee de prestaties. De afzonderlijke metingen staan bij onze cases.
Een klassiek CMS als derde optie
Een vergelijking tussen Astro en Next.js hoeft niet tot één van die twee te leiden. Voor veel kleine en middelgrote bedrijven blijft een klassiek CMS zoals WordPress, met een goed thema en een beheersbaar aantal plugins, een passende optie.
Het beheerdashboard is vertrouwd en veel functies zijn als plugin beschikbaar. Daar staat onderhoud tegenover: updates testen, compatibiliteit controleren en bewaken wat thema en plugins aan de pagina toevoegen. Een klassiek CMS hoeft niet traag te zijn, maar vraagt aandacht voor die keuzes.
Astro, Next.js en klassieke stacks naast elkaar
Hoe meer gedeelde interactie en serverlogica je project heeft, hoe belangrijker de applicatiefuncties van het framework worden.
| Criterium | Astro | Next.js | Klassieke CMS-stack |
|---|---|---|---|
| Rendertype | Statische HTML als standaard, server rendering optioneel | Server rendering, statisch of hybride | Server-side, binnen het CMS |
| JavaScript in de browser | Geen voor statische componenten; wel voor interactieve eilanden | Afhankelijk van client components en implementatie | Afhankelijk van thema en plugins |
| Sterk in | Marketingwebsites, blogs, documentatie | Webapps, dashboards, platforms | Eenvoudige sites die snel live moeten |
| Interactie | Via eilanden; complexer bij veel gedeelde state | Uitgebreide ondersteuning voor state, formulieren en realtime | Via plugins of maatwerk |
| Contentbeheer | Combineer met een headless CMS zoals Storyblok | Idem, of eigen backend | Ingebouwd dashboard |
| Onderhoud | Build, dependencies en hosting; runtime bij serverfuncties | Dependencies, hosting en eventueel runtime | Core-, thema- en plugin-updates |
| Technische drempel | Frontend-ontwikkeling vereist | Frontend- én backend-vaardigheden | Laag; zelf beheerbaar |
| Hosting | Statisch op een CDN, voordelig | Statische export, of een runtime voor serverfuncties | Eigen hosting met database |
Twijfel je welke stack past bij jouw plannen? Vraag een gesprek; ik bekijk eerlijk wat de moeite loont.
Per gebruikssituatie
Marketingwebsite of blog
Hier kies ik vaak Astro. Veel pagina’s en weinig ingewikkelde interactie passen goed bij statisch renderen. Met een headless CMS krijgt het team een editor, terwijl de site via een CDN kan worden geleverd. De Verhuurwinkel-case toont maandelijkse mobiele PageSpeed-labmetingen van een Astro-site in productie. Dat zijn geen CrUX-metingen en ze bewijzen geen effect op de Google-positie, maar je kunt er de gemeten technische prestaties volgen.
Webapp met veel interactie
Bij een klantportaal, configurator of dashboard met realtime data wil je samenhangend state management, formulierlogica en serverroutes. Daar past Next.js vaak beter. Je kunt dit ook met Astro bouwen, maar veel gedeelde interactie maakt de eilandenarchitectuur minder vanzelfsprekend. Voor dit soort webapps biedt React veel componenten en bibliotheken. Reken bij serverfuncties wel op een runtime en het onderhoud daarvan.
E-commerce
Bij e-commerce hangt de keuze af van wat je zelf bouwt. Een catalogus met checkout op een bestaand winkelplatform kan goed met Astro. Een winkel met veel eigen klant-, voorraad- en betaalprocessen vraagt meer applicatielogica; dan kan Next.js beter passen. WordPress met WooCommerce is ook een optie, mits het beheer en pluginonderhoud bij je organisatie passen.
In combinatie met een CMS
Astro en Next.js kunnen allebei de frontend vormen van een headless CMS zoals Storyblok. Wil je vooral content publiceren, dan ligt Astro voor de hand. Combineer je content met uitgebreide applicatielogica, dan past Next.js vaak beter. Twijfel je tussen headless en een klassiek CMS? Headless CMS vs klassiek CMS bespreekt die afweging; Storyblok vs WordPress vergelijkt twee concrete systemen.
Hoe ik zo’n keuze zelf aanpak
Bij een klantproject begin ik niet met een lijst frameworkfuncties. Ik laat AI-agents in Hermes het voorwerk doen: bestaande content inventariseren, interactieve pagina’s en componenten tellen en aandachtspunten voor onderhoud verzamelen. Ik controleer die inventaris voordat we opties vergelijken.
Daarna maak ik de keuze samen met de klant. Is een vertrouwd dashboard belangrijk? Hoeveel interactie is nodig? Wie onderhoudt de site over twee jaar? De agenten versnellen het voorwerk; wij wegen de techniek af tegen het beschikbare budget, het team en de groeiplannen.
Wil je die afweging voor jouw project maken? Lees meer over een Astro-website laten maken of onze aanpak voor webdevelopment, of vraag een gesprek aan.
Zo kies je: vijf vragen
- Wat gaat de site doen: vooral content tonen, of moet er echt iets gebeuren (inloggen, rekenen, configureren)?
- Hoeveel pagina’s hebben interactiviteit nodig, en hoe ingewikkeld is die?
- Wie werkt er dagelijks in het systeem, en hoe technisch is dat team?
- Wie onderhoudt de site over twee jaar: je eigen team of een externe ontwikkelaar?
- Hoe belangrijk zijn laadtijd en Core Web Vitals voor je omzet?
Veel content en weinig interactie wijst vaak richting Astro. Veel applicatielogica maakt Next.js interessant. Een vertrouwd beheerdashboard kan reden zijn om voor een klassiek CMS te kiezen. Loop je op meerdere antwoorden vast, werk dan eerst de functies en beheerafspraken uit.
Conclusie
Astro geeft contentrijke sites een lichte uitgangspositie; Next.js biedt meer samenhang voor uitgebreide webapps. Een klassiek CMS blijft bruikbaar als het beheer en de beschikbare functies passen. De CrUX-cijfers helpen de technische afweging, maar vervangen haar niet. Kies het systeem dat je benodigde functies én het onderhoud aankan.