Who knew that the 2024 holiday season was going to have so many presents waiting under the tree for web developers? Vite 6, Deno 2, React 19, Svelte 5, and Astro 5 all had stable releases the past few weeks, just to name a few. Its been a particularly great year for the Javascript ecosystem, and I personally have been itching to use some of the promising new features that just landed (I’ve been especially excited for the Svelte 5 stable release so I could try out the new rune syntax).

With all the new stuff coming out, I decided to do what every cliche web developer does and rewrite my portfolio using shiny new tools. This was kind of a big deal for me because, I’m usually a “vanilla JS/no framework” kind of guy, at least for static sites. I absolutely loath adding in heavy frameworks where they aren’t needed, but this year I let myself get swept up by the hype and decided to see for myself why tech twitter has been so evangelical about Astro.

Why Astro?

The past year of my career I’ve really been focused on being a more pragmatic programmer, and part of that is using the right tools for the job. My OG portfolio was written in plain ole’ HTML, CSS and vanilla JS. I didn’t use any frameworks because its a simple site, so it doesn’t need one. I don’t like adding unnecessary complexity and megabytes of dependencies to a page that just has a bio and a couple of links to my personal projects.

Theoretically, I could have switched to using one of the many static site generators out there a long time ago, but none of them have ever clicked for me. Writing plain HTML and JS has always just been easier so I never really saw the point. Well after a quick rewrite in Astro… I see the point.

Astro lets you compose your sites by building smaller components that get pieced together to create the larger design. This is great because its the same paradigm all the modern frontend frameworks use, so putting together an Astro project feels a lot like using something like React or Svelte. It gets even better though, because writing the astro components themselves feels more like writing plain HTML and JS. This is a much different experience compared to what its like to use some other framework’s special dialect of javascript.

Astro also throws in some modern niceties that you can find in other popular frameworks. For example, in Astro components you have a frontmatter, which gives you the chance to run JS on the server. This is incredibly powerful (which is why so many frameworks these days default to server-side rendering) and opens the door to do a lot of cool stuff without negatively impacting your page metrics. Another Astro feauture I was seriously impressed by was takes it straight up lets you use Svelte, React, or other framework components in your project. Just plop them into you src folder, add a line to your config and BAM: you just used components from other frameworks in your Astro project. It’s seriously that easy.

With all of these features, I now have a modern, component-oriented way to build static websites that load ridiculously fast, and have a writing experience much closer to writing plain HTML and JS. No need for a super heavy SSR framework or tons of dependencies. I probably would’ve been sold there, but wait, there’s more! Astro has this thing called content collections. For static, content-driven websites, Astro’s content collections feature warms my little programmer heart to the core.

Content Collections are an awesome way of organizing your content. On my portfolio website I’m using them for my blog posts and my projects. They give you type safety on your content headers, and tons of really easy ways of collecting and sorting through all of the content you have. It’s really a great way of interfacing with a bunch of content, and it all gets bundled together and pushed to prod in a nice little static MPA that makes all the lighthouse scores and SEO bots very very happy.