Astro vs Next.js: Which One for Static Sites?

This blog runs on Next.js, actually

Yep. This blog is built with Next.js. But when the company needed a separate technical docs site, I gave Astro a try. Having used both, the difference for static sites is pretty significant.

First impressions of Astro

I was shocked looking at the build output. Zero bytes of JavaScript. If a page has no interactive elements, you literally get just HTML and CSS. Next.js ships at least ~80KB of JS even on an empty page because of the React runtime.

The docs site scored 100 for Performance, 98 for Accessibility, and 100 for SEO on Lighthouse. My Next.js blog scored 94 on Performance. That 6-point gap might not seem like much, but the LCP improvement in Core Web Vitals was unmistakable.

(Zero bytes of JavaScript was genuinely shocking.)

Islands Architecture is the key

Astro's core concept is Islands Architecture. Instead of managing the entire page with JavaScript, you only attach JS to components that need interactivity -- like little "islands."

A search bar loads immediately with client:load. A comments section loads only when visible with client:visible. This selective hydration slashes bundle size dramatically.

There were downsides though

State management is awkward. Sharing state between Astro components requires a separate library. It's not as natural as passing state from parent to child like in React. I used nanostores, but it wasn't as intuitive as React's useState.

And if you need dynamic routing or server-side logic, Astro alone isn't enough. You need to add an adapter, and at that point you start thinking "I should've just used Next.js."

Actual build comparison

I built the same content (43 documentation pages) with both frameworks.

Astro: build time 8 seconds, output size 2.3MB, average JS per page 0-12KB. Next.js: build time 23 seconds, output size 14.7MB, average JS per page 87KB.

The difference is clear. For static-content-heavy sites, Astro is overwhelmingly lighter.

My decision criteria

If 90%+ of the content is static -- Astro. Blogs, docs sites, landing pages, portfolios. If there's heavy interactivity or it's more of an app -- Next.js. Dashboards, admin panels, SaaS.

I briefly considered rebuilding this blog in Astro, but interactive elements like the search modal and theme toggle are scattered everywhere, so Next.js made more sense. But next time I need to build a technical blog, I'll probably go with Astro.