All posts
5 min read

Why I Chose Astro Over Next.js

After building with both frameworks, here's what swayed me toward Astro's island architecture for content-heavy sites.

#astro#nextjs#frameworks

When I first started building modern web apps, Next.js was the obvious choice. It had everything: routing, server-side rendering, a massive ecosystem. But after building several content-heavy projects, I found myself fighting the framework more than working with it.

The Problem with SPAs for Content Sites

Next.js is fantastic for dynamic, interactive applications. But for a portfolio site, a blog, or a documentation page? You’re shipping megabytes of JavaScript to render what is essentially static content with a few interactive sprinkles.

I measured my bundle sizes. A simple blog post with Next.js was pushing 80KB+ of JavaScript to the client. For what? A few paragraphs of text and an image?

Enter Astro

Astro’s approach clicked immediately: ship zero JavaScript by default. Your components render to static HTML at build time. Only when you explicitly opt in, wrapping a component in a client:* directive, does JavaScript get bundled.

This means my portfolio site loads in under a second, scores 95+ on Lighthouse, and still has interactive React islands where I need them (like the hero toggle and navigation).

The Island Architecture

The metaphor is perfect. Your page is an ocean of static HTML, and interactive components are islands scattered across it. Each island hydrates independently. No hydration waterfall. No unnecessary re-renders.

---
// This component renders to HTML, zero JS sent to client
import StaticHeader from '../components/StaticHeader.astro';
// This component ships JavaScript, it's interactive
import InteractiveToggle from '../components/react/HeroToggle.tsx';
---

<StaticHeader />
<InteractiveToggle client:load />

Content Collections

Astro’s content collections gave me type-safe Markdown and MDX with zero config. I define a schema, write my posts, and get autocomplete for frontmatter. No plugin wrangling.

What I Still Use Next.js For

Next.js isn’t going anywhere for my client work. For dashboards, SaaS apps, and anything with heavy interactivity, it’s still king. But for content-first sites? Astro wins hands down.

The best framework is the one that gets out of your way and lets the content shine.

Thanks for reading!

Back to all posts