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:
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.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:
Page | Total JS transfer | JS cached from previous pages | Non-cache transfer |
---|---|---|---|
Home | 7.5 kB | n/a | n/a |
Blog | 7.5 kB | 7.5 kB | 0 kB |
This page! | 7.6 kB | 6.5 kB | 1.1 kB |
Labs | 7.5 kB | 7.5 kB | 0 kB |
React Component Benchmark | 48 kB | 3.7 kB | 44.3 kB |
Want to see how this is all built? My website’s code is available for browsing on Github at paularmstrong/paularmstrong.dev!