Over the past day, I’ve been quietly rebuilding my personal website and blog — and today I’m excited to share a little bit about the why behind a big change: moving from Next.js to Astro.
Next.js has been an incredible framework for me. It’s mature, powerful, and familiar. But as I spent more time thinking about what I wanted from my personal site, a few things started to nag at me. I didn’t need heavy interactivity. I didn’t need a full API layer. I didn’t even need most of the dynamic features Next.js is so good at. I just needed something fast, simple, and optimized for content.
That realization led me to Astro.
Why I Wanted a Change
Here’s the short version: my Next.js setup was overkill for what I needed.
- Performance: Even with optimization, my old site pulled in a lot of JavaScript. Not a huge deal for a personal blog, but it felt unnecessary.
- Developer experience: Next.js is fantastic for apps. But for a blog? I found myself wiring up things like custom MDX support, content collections, and routing by hand. It worked, but it wasn’t fun.
- Simplicity: I craved a “write content, publish site” flow, not “debug webpack issues for an hour” flow.
- Modern static-first mindset: I wanted to build a site that leaned into the idea that most pages can (and should) ship zero JavaScript unless it’s actually needed.
Astro just matched that vision so much better.
What Makes Astro Different
If you haven’t played with Astro yet, it’s worth a look. Their motto is “Build faster websites with less client-side JavaScript”, and they actually mean it.
Some things that really stood out to me:
- Partial hydration: Astro lets you ship only the JavaScript your components need, and nothing else.
- File-based routing: Just like Next.js, but even more minimal and content-focused.
- Markdown and MDX: Built-in, first-class support without needing extra plugins or custom setup.
- Content collections: Structured content (like blog posts) are treated like a first-class citizen, making it super easy to work with typed content.
- No framework lock-in: I can use React, Svelte, Vue, Solid (or none at all) on a per-component basis.
For my use case (a simple, beautiful, fast blog) it felt like Astro was purpose-built.
Before vs After: Performance Benchmarks
To really see the difference, I ran a few Lighthouse audits before and after the migration.
| Metric | Next.js Site (Before) | Astro Site (After) |
|---|---|---|
| Performance Score | 100 | 100 |
| First Contentful Paint (FCP) | 1.38s | 0.3s |
| Largest Contentful Paint (LCP) | 1.38s | 0.3s |
| Total Blocking Time | 130ms | 30ms |
Note: These numbers are from desktop tests on a typical network. Mobile numbers saw even bigger improvements.
What Changed?
- Less JavaScript: Astro ships almost no JavaScript by default. Only interactive parts load JS.
- Smaller Bundle Size: No more client-side heavy hydration unless I specifically ask for it.
- Optimized Content Loading: Astro pre-renders everything, so static pages are ready instantly.
- Simplified Build Pipeline: No custom Webpack tuning needed — just fast, optimized builds out of the box.
The experience speaks for itself: the new site feels faster, especially on slower connections and mobile devices.
Final Thoughts
Next.js will always have a special place in my heart, and it’s still my go-to for complex, dynamic web apps. But for this site (a simple place for me to write, share, and tinker) Astro just fits better.
If you’re thinking about building (or rebuilding) your personal site, I seriously recommend giving Astro a look. It might just be the breath of fresh air you didn’t know you needed.