Both are file-based frameworks with excellent tooling, and the choice between them is usually decided by what you are building. Next.js starts from a React application. Astro starts from an HTML document and adds JavaScript where a component needs it.
What each stack does, rather than which one wins. Every row is something you can verify in either project's own documentation.
| What is compared | Astro | Next.js |
|---|---|---|
| Default output | A page with no client-side framework code at all until a component asks for it. | A React application. Server components cut down what is sent, but the client parts still arrive with the framework runtime. |
| Component model | Astro components render on the server; React, Vue, Svelte, Solid and Preact can run beside them as islands. | React throughout, which keeps one mental model across the whole project. |
| How interactivity is declared | Per component, with a client directive that also says when to hydrate: on load, when idle, when visible or on a media query. | Per module boundary, with the client directive at the top of a file and the tree below it hydrated. |
| What the host has to run | Nothing, for a static build. An adapter adds a Node, Vercel, Netlify or Cloudflare runtime where a route needs one. | A runtime that supports the Next.js build output for anything beyond a static export. |
| Data and content | Content collections with a schema, validated during the build. | Data fetched in server components, with caching and revalidation handled by the framework. |
A speed comparison between two different sites measures the sites, not the stacks — and a number without its URL, date and throttling profile ages badly. Measure the project in front of you instead:
Compare the same page, not two different designs. A homepage with a video and a homepage with a heading are not a measurement.
Look at transferred bytes and the number of requests in the network panel, with the cache disabled and a cold profile.
Run the audit three times on the same throttling profile and report the median, not the best run.
Then check field data, which is what visitors actually experienced: the Core Web Vitals technology report is built from real Chrome users and is public.
Publish the URL, the date, the device and the throttling profile with every number, so someone else can get the same result.
Buy your licence. Download Astrology. Start creating.
Requires Node.js, npm and Git · AI features use your installed agent CLI