Let's talk Astro

There's another (yes, another) new kid on the web framework playground, but do we need another? My believe is - it depends. But this one is certainly one to watch out for.

There are so many web frameworks to choose from in the JavaScript ecosystem today; each with their own strengths, weaknesses, and USPs. Generally speaking, not one framework can cater to every use case, but each one does aim to cater to a specific need. So when it comes to the invention of a new one, it needs to either address the pitfalls of an existing framework without sacrificing any major features, or - in the case of Astro - take on a new approach.

The elevator pitch

Astro calls itself an all-in-one web framework that prides itself on its content-driven Multi-Page Application (MPA) approach that aims to ship as little - if any - JavaScript as possible for maximum performance benefits.

What's an MPA?

Multi-Page Applications aren't a new concept. It's a term used to describe a website that communicates with a server each and every time the user makes a request for a new webpage. Think of a typical WordPress site running on PHP; that's an MPA. In contrast to an MPA, you've also got Single-Page Applications (SPAs).

So what's an SPA?

Single-Page Applications are a term used to describe websites built in the same way that major web frameworks like Next.js and Remix champion. Rather than communicating with a server for every page request, SPAs render the entire application on the client-side and on the first load within a sort of JavaScript-based wrapper. This means that all subsequent page requests are handled by JavaScript directly in the browser, with no further server requests needed (except for assets that need downloading, obviously).

What's funny is that on paper, SPAs sound like the fastest approach, and there's no doubt that they have their benefits, but they also come with some pretty big trade-offs, most notably when it comes to performance.

You mentioned performance?

In web development, there's a performance metric called Time to Interactive (TTI). It's one of the six metrics used by Google to measure a website's performance. In short, a website's TTI is how long it takes for a page to become fully interactive.

Naturally, a longer TTI has a poor impact on user experience, as well as Search Engine Optimisation (SEO). Due to an SPAs need to render a full JavaScript application on first-load, their TTI is often longer when compared that of an MPA's. In comparison, MPAs render all HTML on the server before serving it to the browser; this includes any server-side code that needs to run first, resulting in a faster TTI.

An SPA needs to download, parse, and run an entire JavaScript application in the browser just to render any HTML on the page. Then, your SPA will likely need to fetch remote data anyway, introducing even more wait time before your page is finished loading. - Astro

Of course, there are plenty of other factors to consider when it comes to the differences between both approaches, and you'll find much more in-depth coverage on the intricacies between MPAs and SPAs from a host of other sources. For the purposes of this article, here's Astro's take on the topic.

What makes Astro different?

Quite a lot, as it turns out. In my time spent with Astro, I've picked out my favourite features that sets it apart from some of the other competitor web frameworks.

Experience

As explained before, Astro is just a server-side MPA framework. However, its biggest difference when comparing it to other MPA frameworks is that it's still just JavaScript; there's no additional server-side languages or templates to learn and use. All of that JavaScript is also all pre-rendered on the server which results in a massive reduction in the amount of JavaScript on the client-side (I.E. the amount of JavaScript the client's browser needs to download, process, and run). As Astro puts it, "the result is a developer experience that feels a lot like Next.js and other modern web frameworks, but with performance characteristics of a more traditional MPA site architecture".

JavaScript

"Ship less JavaScript" has been a tagline of sorts for Astro, and it's one of its ultimate goals. As useful as JavaScript is, there's no question that websites running without it perform better than those with it. There's less work for the browser to do and less to download from a remote server. Of course, there are times when JavaScript is needed for interactivity purposes, but Astro's opt-in to complexity approach and their focus on attempting to remove JavaScript when it's not needed is an extremely effective approach at tackling some common pitfalls found in other web frameworks.

Architecture

Another of Astro's major selling points is its island architecture. The cool term aside, Islands are a type of interactive component that are rendered in isolation to the rest of the static page that it lives on.

In Astro, interactive components that require JavaScript on the client-side to function, like carousels or video players, are rendered independently to the rest of the page. This means that you can serve an entirely static HTML page, but with isolated areas of interactivity that don't affect the rest of the page.

Read more about Astro Islands and the concept behind them here.

Flexibility

Finally, the third feature I'd like to mention is the fact that Astro is completely framework agnostic. Unlike the majority of other web frameworks out there, you're not tied to any one JavaScript framework like React, Vue, or Solid. You can use Astro effectively with any framework, no framework, or even multiple frameworks by mixing and matching components! This is likely to be a dealbreaker for many developers when it comes to choosing a web framework, especially within a team of other developers.

Astro is also highly compatible with a huge selection of JavaScript frameworks and provides a growing collection of both first-party and third-party integrations for a wide selection of frameworks, tools, and systems, making it super flexible and perhaps easier to adopts than other web frameworks.

Final thoughts

Honestly, I love Astro. For the reasons I've outlined above and more. My current website (at the time of writing) is powered by Next.js, and during my time spent with Astro, it has almost entirely convinced me to switch.

Don't get me wrong - there's still a firm place in the ecosystem for Next.js and similar competitors, and I have no doubt that they'll be working hard to close the gaps that Astro has created. There's much more that we're yet to see from Astro too, but as I mentioned at the beginning, every web framework serves a specific use case, and Astro meets mine; a simple and flexible content-driven website with plenty of room to grow.

🚀 Give it a shot! Visit astro.new.