Astro: The Rocket Fuel for Static Website Awesomeness
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!
Fasten your seatbelts: We soar to the stars Astro
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.
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.
Optimisation and performance: Why Astro stands out from the rest
In this section, we'd like to highlight the key differences between Gatsby and Astro to help you make your choice between these frameworks.
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.
By leveraging Astro's optimisation and performance capabilities, devs can create websites that not only load faster but also engage users effectively.
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.
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.
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.
Mission accomplished! Our experience
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.
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:
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!
Astro unleashed: Exploring its advantages and disadvantages
So, what can we say about its strengths? Astro has a bunch of pros, including:
1. Ease of learning and application
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.
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.
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.
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:
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!