Firstly, this is not me dunking on Gatsby or an ad for Astro. I was running my blog on Gatsby, and it was fine. It’s got a solid community, but it’s starting to feel like a bunch of old-heads who aren’t interested in trying something new. Astro’s like a bunch of wreckless kids who just want to make stuff and break stuff. It’s refreshing. We live in the age of content creators, and everybody’s gunning to share their hot take on the latest stuff. Full disclosure: I found Astro via a Twitch streamer who owns shares in the company.
Islands of Interactivity: Not Everything Needs to Be Lit Up Like a Christmas Tree
“Why is everything moving? Why does this button need to be interactive when I just want to scroll?” Gatsby sends everything down the pipe, lighting up the whole site whether you need it or not. Astro’s smart. It says, “Hey, maybe only this little piece needs to be interactive.” They call it islands of interactivity—you hydrate just the parts that need it, and the rest stays nice and calm. It’s like only turning on the lights in the room you’re in, instead of lighting up the whole house.
UI-Agnostic Astro Doesn’t Play Favourites
You want to use React? Great. Prefer Vue or Svelte? No problem. Maybe you’re feeling adventurous with Solid or Lit? Go for it. You can even throw in some web components or HTMX if that’s your jam. Astro’s UI-agnostic, which means it doesn’t care what you use—it’ll work with whatever framework you want.
Server-First: Keep the Heavy Lifting Off Your Visitors
Look, nobody likes waiting around for a website to load, especially when it’s bogged down with client-side rendering. Astro’s got this server-first approach that moves all the heavy lifting off your visitors’ devices and handles it on the server side. It’s like having a butler who does all the work behind the scenes so that everything’s ready when you need it. Your visitors? They get a lightning-fast experience because the server’s doing the hard work, not their poor, overworked browser.
Zero JS, by Default: Why Slow Down When You Can Speed Up?
Most sites out there are loading up all this client-side JavaScript that just slows everything down. With Astro, if you don’t need JavaScript, it doesn’t send any. And if you do need it? You just add it where it’s needed, and nowhere else.
Content Collections: Type-Safe Markdown? yes plz
Organizing content can be a nightmare, especially when you’re dealing with a bunch of Markdown files scattered everywhere. But with Astro’s content collections, you get validation and type-safety, so you don’t end up with any nasty surprises when you hit publish. It’s like having AI generate code, but you can actually trust it (shots fired).
Customizable: Tailwind, MDX, and All the Goodies
Astro’s got customization down to a science. You want Tailwind CSS? Go ahead, throw it in. Need MDX for some fancy Markdown with React components? Done. And if that’s not enough, Astro’s got hundreds of integrations to choose from.
(Partially) Hydrating Components: Give It Some Water, But Not Too Much
You know when you’ve got a plant that needs watering? Gatsby’s flooding the garden, while Astro’s just giving it what it needs. Hydrating components means you’re only loading the JavaScript for what’s actually on the page. Not everything needs to be a full-blown React app. Sometimes a button just needs to be a button, and Astro gets that. It’s lean, and it’s not wasting your time—or your users’ bandwidth. Astro’s uses partial hydration. “Why load the entire script for this carousel when it’s buried at the bottom of the page?” Instead, it hydrates only the parts that need it, when they need it. The rest? It stays dry until it’s actually time to load. It’s smart, it’s efficient, and it keeps your page from turning into a bloated mess. But hey, what do I know? My plants are currently on life support.
Intersection Observer: Let’s Talk About What’s in View
Astro’s got this thing called Intersection Observer baked in, and it’s a game-changer. Ever wonder why a page’s loading stuff way before you even scroll to it? Gatsby’s been guilty of that, but Astro’s smarter. It’s like, “Hey, you’re not looking at that part yet? Fine, I won’t load it.” It’s efficient. It’s like getting served dinner one course at a time, instead of having everything dumped on your table at once. Poor example again, set menu is probably not the most relatable example.
Client Load: vs Client:Visible: Load It When You See It
Astro gives you options. You can load components when the page loads, or you can use this client:visible directive and only load stuff when it actually comes into view. It’s like the difference between prepping a meal and leaving it on the counter for hours versus cooking it fresh when you’re ready to eat. Why have something sitting there, cold and stale, when you can have it fresh and hot?
<!-- client:load: Immediately hydrate this component on page load -->
<MyComponent client:load />
<!-- client:visible: Only hydrate this component when it comes into view -->
<MyComponent client:visible />
<!-- client:idle: Hydrate this component when the browser is idle -->
<MyComponent client:idle />
Dynamic Routes: Build It as You Need It
Whether you’re pulling data from an API or just need a bunch of different pages generated on the fly, Astro’s got it covered. It’s like having a personal chef who can whip up whatever you want, whenever you want. No more wrangling with file names or manually building every little page.
SSR: It’s not all sunshine and rainbows
Astro’s got Server-Side Rendering (SSR) too. Now, it’s not all sunshine and rainbows. Sure, SSR gives you fresh, dynamic content, but it’s a bit heavier on the server load and slower on the first byte. So if you’re going all-in on SSR, you might take a hit on performance here and there. And maybe it doesn’t have the same massive plugin ecosystem as Gatsby. At least not yet. But it’s cool. So I’d bet my bank account that it will soon.