Powered by Astro
A Second Faster: Why I Ditched Next.js for Astro (And How Svelte Helped Me Do It)
I’ve always been a huge fan of web optimization and speed. That’s why I recently took a pretty drastic step: I rewrote my personal website from Next.js to Astro. And I have to say, the result exceeded my expectations – my site’s key loading metrics in PageSpeed Insights improved by a full second!
What is a Framework, and What Do Next.js and Astro Solve?
To start, a framework is a set of tools, libraries, and conventions that makes it easier and faster for us web developers to build complex applications. It’s not just about writing code, but also about routing, state management, or page generation. Next.js is an established framework built on top of React, which is ideal for full-stack, server-rendered applications where you need dynamism and APIs. In contrast, Astro is a newer, modern framework focused primarily on speed and Static Site Generation (SSG), allowing you to use components from various libraries (React, Svelte, Vue) while shipping only essential JavaScript to the browser.
Why the Change? Next.js vs. Astro
Next.js is a fantastic framework, no doubt about it. It’s a robust, full-featured solution with great routing and a powerful ecosystem, ideal for large, dynamic applications and e-commerce sites. But for my simple, content-focused blog, which doesn’t need server functions for every single page, Next.js started to feel like overkill.
This is where Astro steps in. Astro is a “framework for content-driven websites,” and its philosophy is simple: Ship as little JavaScript to the browser as possible.
| Feature | Next.js (Default) | Astro |
|---|---|---|
| Approach | Full-stack (SSR/SSG/ISR/CSR) | Content-focused (Static/Hybrid) |
| Core Philosophy | Ship JS for interactivity and hydration | Produce static HTML, JS only for essential interactivity |
| Performance (JS) | More JS is shipped to hydrate the whole page | Astro Islands: Ships JS only for interactive parts |
| Compatibility | Primarily React | Natively supports React, Svelte, Vue, Lit, etc. |
For my static blog, the key was that Astro generates clean, blazing-fast HTML, and only uses JavaScript where it’s absolutely necessary. That’s the magical technique of Astro Islands, which is what led to the massive speed boost.
Svelte, My New Job, and Astro
I recently started working at a company called Fastest, where we primarily focus on Svelte. This experience made the whole migration to Astro incredibly smooth.
Astro components felt immediately familiar to me syntactically. They are written in the *.astro format, and their structure is very intuitive. But the major win: Svelte components are fully compatible with Astro! I could take existing Svelte components from other projects and drop them right into my Astro site. No unnecessary React wrapping required.
This interoperability confirmed that Astro is truly a framework for everyone
– it lets me use the best of different worlds without any unnecessary overhead.
Conclusion: Speed Speaks for Itself
When I compared the PageSpeed Insights scores before and after the migration, the difference was stunning. That one second I shaved off the key metrics is tangible. It means a better UX for users, better SEO, and just the sheer joy of a speedy website.
If you’re building a blog, documentation, or a marketing site where content is king and speed is the priority, my recommendation is clear: Give Astro a shot. It will make your life easier, and your users will thank you for the lightning-fast load times.