Astro is an innovative web framework that’s gaining popularity among the web development community. Its main goal is to speed up the creation of content-focused websites. In this article, we’ll take a closer look at Astro, its unique features and advantages, and share our experience using this framework.
An Introduction to the Framework
Before we dive into our experience with Astro, let’s look at a few general aspects of this framework.
What Is an MPA Framework?
Astro is a Multi-Page Application (MPA) web framework. What does that mean exactly? It means that Astro renders pages on the server, so as you browse the site you get continuous delivery of those pages. This is useful for content-focused websites because they don’t require full interactivity on every page. Don’t worry, though: Astro can also lazy-load client-side JavaScript using its Island architecture – but more on that below.
MPAs are different from Single-Page Applications (SPAs) because in an SPA the HTML is rendered locally by a framework or library. React is an SPA library that renders HTML based on a representation of a virtual DOM tree, determining what should be rendered and when. If you want to learn more about React, we invite you to read our document about React history.
What Makes Astro Unique?
Astro positions itself as a unique framework because it uses JavaScript both as the server language and as the runtime language. Personally, I appreciate this because switching context as a full-stack developer can be difficult when you work with many languages.
The framework also allows you to bring your own technologies (BYOT). There’s no issue if you prefer a simple blog that uses only plain JS and CSS, but if you want to deliver more, you can. With Astro’s easy-to-use command-line interface, you can add React, Vue, and other integrations!
Finally, I’d like to mention one of Astro’s main selling points. It delivers less JavaScript code! That’s how they fulfill their promises of “default speed”.
The Island Architecture
The invention of the Island architecture is attributed to Katie Sylor-Miller, a front-end architect at Etsy. If you think of your application as areas of static and dynamic content, you can imagine how the Island architecture works. If you use my homepage https://cskl.pl/ as an example:
Some interactive elements require JavaScript, while everything else is static. The idea of islands is that static UI elements (images, text, etc.) can be rendered on the server and delivered without JavaScript, while interactive components that require JavaScript for interaction are called “islands”. By setting their priority, you can ensure that interactivity loads first, while secondary elements can load while the user is browsing.
When should you use it?
In general, developers choose Single-Page Applications when they need a lot of client-side interactivity and logic. Gmail or Google Calendar are great examples. These highly complex web applications require JavaScript for the best user experience. Comparing Gmail to my business website https://cskl.pl/, it’s easy to see why I can use an MPA framework compared to the interactive requirements of a well-known Google mail service.
Content-focused pages with less client interaction fit well with MPAs because we can lazy-load the parts that require JavaScript. This means faster server-side rendering, with incremental JavaScript being added only when it’s needed, using the Island architecture.
Our Experience With Astro
My adventure with Astro started with reading the documentation, testing the tutorial, building a blog from the tutorial, and finally rewriting the business website using Astro. The framework focuses on sending less JavaScript by default and makes it easier to create efficient pages with the Island architecture. Time will tell how well Astro is going to be received, but from my experience, it deserves recognition for how easy it is to learn. For content-focused websites that don’t require JavaScript at every step, Astro offers an easy-to-use yet powerful developer experience and an approach to building something amazing. I’m genuinely excited about Astro, and I see it as an alternative—or even a competitor—to NextJs.
Did you like this article? Want to have a fast website like this one? Feel free to check the “contact” tab for a free quote.
