Skip to main content

The case for Astro

I built my website with Astro, without having intended to. I often use my own personal site as a test-bed for learning new frameworks and tech. In testing out Astro, it just sort of stuck. As I continued, it became clear why – but the reason may be surprising.

The current headline on the Astro.build home page is “Build faster websites.” This was a big selling point, initially, in getting me to try Astro. When building a static website, there’s not a lot of point in sending large frameworks (like React) over the wire – even for server-generated content, really. While this is one of my main requirements, it’s not the reason I’ve found to stick with Astro.

Astro also uses Vite for development and building. It’s a nice bonus how fast the site runs in dev and builds for production. But again, it’s not why Astro is best for me now.

The real icing on the cake comes from two parts of Astro combined:

  1. Astro Islands

    Statically generated content getting hydrated as minimal islands for small interactive pieces of the UI is just what I found I ended up needing over time. While I could have done dark & light mode for the site automatically chosen by the prefers-color-scheme CSS media query, I wanted to be able to manually toggle modes as well – and who knows, maybe one day I’ll add a third or more other themes. This type of thing requires JavaScript.

  2. Astro integrations

    Now here’s the kicker. I wanted to use Astro Islands, but I didn’t want to have to load all of React in order to get it done. I went with SolidJS for the main interactive bits of the site. At the moment there are 3: the theme switcher, the “scroll to top” button that appears on longer pages when scrolling, and the “share widget” at the bottom of every blog post.

But wait! There’s more! It isn’t just that I could use one framework (an integration) for islands. The fact is that where I want it, I can use any framework. I’ve started a labs section of the site using just that!

There’s only one item there so far, but I’m so excited about how it turned out, that I wanted to boast about Astro and the fact that I have a super fast, statically generated, multi-page site that allows me to use almost any tech without worry about bleeding JS libraries across pages.

Open up your network inspector as you browse across my site and you can see for yourself how the page weight is as minimal as possible from one page to another:

PageTotal JS transferJS cached from previous pagesNon-cache transfer
Home7.5 kBn/an/a
Blog7.5 kB7.5 kB0 kB
This page!7.6 kB6.5 kB1.1 kB
Labs7.5 kB7.5 kB0 kB
React Component Benchmark48 kB3.7 kB44.3 kB

Want to see how this is all built? My website’s code is available for browsing on Github at paularmstrong/paularmstrong.dev!