Why Astro is my Favorite Framework

I have been following the development of Astro pretty much since the beginning. I feel like it is definitely at the point now that it is easy to recommend it when building a new website.

Experience with Astro

I think what made me seriously look into Astro was how frustrated I was with the tools we were using at work. We use a mish-mash of Jekyll and Hugo for static sites and there seems to be frustration around developing with them.

It feels like every time we run into an issue with Hugo, we spend a decent amount of time perusing forums for answers that aren’t there. The community around Hugo also tends to be a bit irritable and unwelcoming, so it might be difficult to get answers.

I tested out a couple of options: 11ty and Astro - both are great tools with incredible communities and ultimately would recommend either. Personally speaking, the development experience with Astro is just a tad better.

Astro makes things very straightforward. It uses JavaScript for templating. Pages, layouts, and partials are all Astro components. It has very simple flat-file routing. Also, their docs are incredible.

While researching if it would be a good option at work, I was able to start building things very quickly. I built four small projects while learning what Astro had to offer:

Who’s that Pokémon?

Who’s that Pokémon is a small application I put together that displays a randomly selected Pokémon and reveals which one it is after 5 seconds.

The interesting thing with about this project is that it happens with no client-side JavaScript. Using Astro’s server-side JavaScript, I made it so it will fetch from the PokéAPI and render it at page load with Netlify’s SSR.

RIMdev Radio

RIMdev Radio was a small project I created to display some of our dev team’s favorite music and manage a Spotify playlist. It didn’t quite work out the way I was hoping, but that was more so my fault for not understanding the limitations of the Spotify API.

With this project, I was able to test out Astro’s component islands by using Vue alongside Astro. It was ridiculously easy to integrate and worked just as you would expect it to.

I also was able to connect this to a Supabase database easily and deploy it on Netlify using server-side rendering - this means as the database updates the site will stay up-to-date without needing to rebuild.

RIMdev Likes Food!

RIMdev Likes Food! was another team-oriented project, basically a way to list out the team’s favorite places to eat. The site uses Mapbox to map out all the restaurant locations.

The goal of this project was mostly to play with content management, using Markdown and MDX to display content. Each restaurant is a Markdown file that includes frontmatter data to populate information on the page, including the GPS coordinates for the map.

Friday Talk

We do Friday Talks at work where any member of the dev team can give a presentation on whatever topics they find interesting - they don’t have to be work or dev related, but I often use these as an opportunity to talk about whatever it is I’m currently excited about.

I made a slide deck and built a small site to demonstrate Astro’s component islands for a talk. I had a Vue, React, and Svelte component all loading on the same page. I also demonstrated Astro’s ability to use MDX by including a component inside a Markdown file.

I believe this helped us decide to use Astro as a replacement for our static sites, as we started converting to it shortly after. We have converted about 4 of our sites now, with only a couple more left to do.

Favorite Features

Astro has a lot of functionality that helps make its development experience great. Here are a few of my favorite features.

Content Collections

Content collections are a newer feature as they were only introduced in version 2.0 of Astro, but were a life-saver during our conversions at work.

These are essentially just a way to organize groups of related content into folders, outside of the flat-file routing structure.

Content collections introduced a few great features along with it though:

• Using Zod, you can set up a schema for markdown and MDX files to ensure you are always providing the right data in Frontmatter.
• Customizable slugs that enable you the ability to alter the permalink of posts. This came in very handy with how some of our website URL structures were set up.
• The getCollection() function provides an easy way to grab all the files inside a collection.

Component Islands

We are a Vue shop at work, so being able to easily implement Vue components is super nice. Of course, this doesn’t just work with Vue, just about any reactive UI framework is available as an integration.

The component islands are amazing as they provide a way for developers to utilize tools that they are already familiar with or even component libraries that they built previously to integrate easily into any Astro project.

Bonus points, since Astro runs JavaScript at build time, these components can render plain HTML or be hydrated to run inside the client’s browser.

Integrations

As previously mentioned, Astro has integrations for most reactive UI frameworks, such as Vue, React, and Svelte, but they also have a bunch of other great tools to enhance websites as well.

I am using a few integrations on this website:

• Sitemaps - Generates your website’s sitemap at build time.
• Robots.txt - Creates a robots.txt file for your site.
• Compress - Minifies all HTML, CSS, and JavaScript files in the built version of your site.

Integrations can be used to connect to third-party tools as well. For my Plausible website analytics script, I have installed the Partytown integration to move into a service worker and off the main thread.

Server-side Rendering

Astro is designed to render JavaScript at build time to deliver as little JavaScript to the client as possible.

This gets even better by setting it up to utilize server-side rendering through a hosting provider such as Netlify as this enables you to build much more dynamic sites without needing to build the project every time.

Vite

Astro’s dev and build processes are handled by another tool I am a big fan of, Vite. Vite is ridiculously fast at building and hot module reloading. Vite is also a lot simpler to configure compared to other tools such as Webpack.

Future Proof

It is hard to say what web development will look like in the future, especially with the rise of artificial intelligence, but I believe that Astro is one of the most forward-thinking frameworks available.

Its ability to adapt to most circumstances, excellent development experience, and commitment to producing fast and high-quality websites prove that it will continue to be a valuable tool in any developer’s toolbox.