Astro: The Rocket Fuel for Static Website Awesomeness

Hey, community!

Today, we want to share our explosive experience working with the Astro framework. If you've already heard of it, you know it's the bomb for creating static websites. And if you haven't, get ready for a pleasant surprise.

We used Astro to migrate our site madappgang.com from Gatsby to Astro, and it was truly good.

We highly recommend giving Astro a whirl and witnessing its power first-hand. In this article, we'll share our adventures with this framework and spill the beans on the best tips and tricks. 

Let's jump right in!

Astro is a superb new web framework that came out in 2021. It's like a Swiss Army knife for building fast and dynamic web applications. 

The best part? It can make your web project faster and lighter with its static site generation (SSG) magic.

Astro knows how to play well with other modern web development tools and even brings unique tricks to the table. You can use your favourite technologies like React, Vue, Svelte, GraphQL, TypeScript, and more to create awesome web components. It has a more than sufficient range of supported technologies. 

Due to the intuitive syntax of Astro, a web developer can easily create fast, secure and, most importantly, easy to maintain static sites. You can find more detailed information here.

The result? A blazing-fast, fully static application without the need for JavaScript. That's something other frameworks can't easily achieve because they have to load all that JS code, which slows things down.

But here's the really cool part: if you want interactivity, Astro has you covered. It has nifty directives that automatically load the necessary JS code when a component becomes visible. So, you get the best of both worlds, speed, and interactivity when needed.

It's a fresh web architecture approach that makes everything work smoothly together. Astro even takes care of some tedious stuff for you, like generating sitemaps and RSS feeds, handling pagination, and organising collections. 

In this section, we'd like to highlight the key differences between Gatsby and Astro to help you make your choice between these frameworks. 

Astro has a unique front-end architecture that provides higher conversion rates and improved SEO without relying heavily on JavaScript.

Hydration

One of the coolest things about Astro is how it handles component hydration. It's like a magician juggling parallel hydration for each interactive component. First, it loads all the static content and then prioritises the important stuff that really matters. 

The heavy hitters get hydrated right away, while the less important elements take a backseat until they're needed. 

This clever approach ensures that JavaScript is loaded in bite-sized pieces, only when necessary. As a result, the site stays fast and responsive, and users won't experience any annoying freezes or delays. It's like the website version of a sports car, ready to rev up and go!

By leveraging Astro's optimisation and performance capabilities, devs can create websites that not only load faster but also engage users effectively. 

JAMstack architecture  

Astro applies the JAMstack architecture to generate static content. It’s an architectural approach to separating the web interface, data, and business logic, separating JS, API, and Markup, which increases flexibility, scalability, performance, and serviceability.

Using templates written with Astro in conjunction with a Content Management System (CMS) like WordPress, Prismic, Strapi, and others, you can generate static pages of your Multi-Page Application (MPA) without JS to minimise site loading speed as much as possible. 

This is not possible when writing a Single-Page Application (SPA) using Gatsby, Next.js, and others, constantly making API requests and generating dynamic content, which increases page load time and users’ expectations of interactivity.

MPAs vs SPAs

To grasp the distinction between Astro and other web frameworks such as Gatsby, Next.js, or Remix, it is crucial to comprehend the tradeoffs involved in MPA and SPA architectures.

MPA renders or generates the content on the server, delivering a finished page to the client. On the other hand, SPA relies on running JavaScript in the browser to render most of the content. This distinction has a significant impact on behaviour, performance, and SEO.

Similarly, the routing mechanism differs between MPA and SPA. In MPA, the router logic is handled on the server, while in SPA, it resides on the client. MPA ensures consistently fast loading of any page, whereas SPA may be slower during the initial render but offers faster subsequent page transitions after the JavaScript is loaded. 

Choosing between MPA and SPA ultimately depends on finding a compromise. 

Astro prioritises the performance and simplicity of an MPA, which is well-suited for content-driven web applications. On the other hand, if a web application requires extensive interactivity and has a large state, frameworks like Gatsby, Next.js, and others that leverage SPA architecture may be more suitable, albeit at the expense of slower initial load performance.

The developers emphasise that Astro was designed for building content-rich websites. This includes most marketing sites, publishing sites, documentation sites, blogs, portfolios, and some e-commerce sites. 

If you have a site of this type, we recommend that you think about migration.

What do the other developers say?

Our interest in the new framework was fueled by the enthusiastic reviews of other developers. Have a look!

Transforming static content into dynamic islands

Astro has this fancy concept called "the architecture of the islands." The term "Astro Island" refers to an interactive UI component on a static HTML page. Multiple islands can exist on a page, and an island is always rendered in isolation. Think of them as islands in a sea of static, non-interactive HTML.

In Astro, you can use any supported ui framework as mentioned before. You use one selected framework or a mix of several. This architectural pattern is achieved through partial or selective hydration.

Astro generates websites without JS by default. Using any supported UI framework, Astro will automatically render them to HTML and then remove all JS. The site will stay fast as all unused JS is removed from the page.

But sometimes, client-side JavaScript is required to create an interactive UI. Instead of turning your entire page into a JavaScript application like an SPA, Astro asks you to create an island. To do that, use Astro’s built-in directives.

With Astro Islands, most of your website will stay clean, light, and fast. Depending on the directive specified on the component, the loading priority will be determined in order to display the important components first. This is achieved by parallel loading and isolated hydration of each component.

Alrighty, it’s time to share our experience of migrating, and the end results from Lighthouse after the process was completed.

The migration was relatively simple, but it took about 2 days to read the documentation and understand all of Astro’s features.

First, we installed Astro and deployed a new project. Then, we created all the necessary routes by generating page files in their respective page root folder. We systematically transferred each React component to the components' root folder. We followed the same process for styles, fonts, and other assets.

Before that, we installed packages like ReactJS, Classnames, Lodash, etc., to ensure the functionality of our site. Fortunately, when migrating the site from Gatsby to Astro, a significant portion of the code could be reused. 

All components were already prepared in ReactJS, requiring only minor adjustments to the React components. The pages for preview were constructed using these components.

For the Blog pages, we used content from the Prismic CMS, where it was stored. We successfully extracted the content from each blog and generated the corresponding pages.

There were no significant differences in retrieving data from the Prismic CMS. GraphQL was employed for both Gatsby and Astro.

All blog post pages were statically generated on the server. To facilitate on-demand post searches, we made the decision to use server-side rendering. We chose not to implement this on the client side due to the additional JavaScript, GraphQL queries, and the need for extra filtering and sorting. Such operations can be performed on the Prismic GraphQL server.

Consequently, the site comprises minimal JavaScript code, allowing for swift delivery to users worldwide through a Content Delivery Network (CDN).

What do we have as a result?

Check out the image below for a glimpse of our accomplishments. We achieved outstanding metrics, scoring 100% in SEO and Best Practices, and an impressive 93%+ in Performance and Accessibility. 

The loading speed of the ring page improved from 0.3 to 0.7 seconds, and we implemented maximum image optimisation to eliminate any layout jumps during page load.

Take a look, here are more Lighthouse metrics before the migration: 

And the same ones after the migration:

In head-to-head tests, Astro left Gatsby in the dust when it came to building time, page load speed, and overall performance. We didn't have to wait forever to build our site - Astro nailed it like a pro. And boy, does it load pages faster than I can snap my fingers!

So, what can we say about its strengths? Astro has a bunch of pros, including:

1. Ease of learning and application

Astro is easy to master for any developer. It uses well-known web technologies such as HTML, CSS, and JavaScript. So if you have experience with them, you will easily grasp the Astro syntax and effortlessly create an SEO-friendly site.

2. High performance and development speed

Astro is designed for productivity and uses modern web technologies such as server-side rendering (SSR), lazy loading, and code splitting to make websites built with Astro run fast. This is important at low download speeds. Astro also uses the site builder, which speeds up development time and builds time when making new changes to the code.

3. Flexibility

The Astro app can be built with various web technologies such as React, Preact, Vue, etc., just like constructing a brick house. This expands the possibilities and offers a wide range of technology choices, or even a combination of technologies, for web developers.

4. Modern development experience

Since Astro is a modern technology, it uses all modern web development experience and will only get better. That will increase the speed of development and the range of new technologies. Astro comes with built-in TypeScript support. You can import .ts and .tsx files into your Astro project, write TypeScript code directly inside your Astro component, and even use the astro.config.ts file if you like.

5. Edge

Netlify has two serverless platforms, Netlify Functions, and Netlify’s experimental Edge Functions. With Edge Functions, your code is distributed closer to your users, lowering latency.

6. SEO

Since all static content is rendered on the server, the pages are optimised for SEO.

What about weaknesses? All of these can be attributed to Astro’s newness:

1. Newness

Astro is a new technology and has a small community compared to other similar technologies. But in the first 6 months after the release, it has collected about 25k stars on Git, which gives Astro good prospects.

2. Limited plugin ecosystem

Astro has a limited plugin ecosystem in contrast with other popular frameworks. This means that developers may need to create their own solutions for certain features or ones that are not available through existing plugins. All available plugins are here.

3. Lack of maturity

Due to the novelty of Astro, the lack of a wide variety of solutions to various kinds of problems means that you may have to write solutions yourself.

The transition from Gatsby to Astro has been a positive experience overall. Ultimately, we believe that Astro is a powerful tool that could revolutionise how we build static sites. 

If you're on the lookout for an excellent framework to whip up lightning-fast static websites, it’s the real deal. Many seasoned web devs swear by it, and for a good reason!

Astro offers several unique features that made development faster and easier, such as partial hydration, framework-independent, markdown and components, optimised build output, an extensive ecosystem of plugins, and most importantly, ease of use.

But the coolest part is its intuitive syntax. Even if you're not the most experienced programmer, Astro is a breeze to pick up. With seamless integration into popular UI frameworks and external libraries, not to mention support for serverless functions, Astro makes web development a total delight. It's the perfect blend of simplicity and top-notch performance.

In a nutshell, Astro is here to make web development fun, fast, and hassle-free. Give it a try and see the magic for yourself!