Since 2021, I’ve been using Vue.js to develop all my sites. I love it – it’s fast, has an awesome DX, great support from the community, a huge plugin repository, and much more. The only part it lacks is SSR, and SSG, which is fine because it was made for building client-side apps.
Now, it’s been years since I made my portfolio site and I’ve never maintained it since. Initially, I developed this site with Vue.js, and it did well, but since my site was mainly static, having client-side rendering was a bit unnecessary/overkill. I wanted to switch to something that could generate static sites and also have a good DX. I tried Nuxt.js but it was a bit too complicated (skill issue?) for my needs. I wanted something simpler.
I started looking for solutions. I found Vite had SSR support for Vue.js, though low-level. Then there was Marko.js, which is really cool, but not great in terms of DX. I actually considered doing plain HTML/CSS with Alpine.js to implement the reactivity I needed.
Then I found Astro. I’d heard of it before but never tried it. Their main motivation was creating content-driven pages, SSR, and a similar DX to any modern JS framework. Plus, it outperformed1 many top SSR frameworks and I love me some blazingly fast tech. The best part is that you can integrate any popular JS framework – this alone lets you move your website to Astro with ZERO downtime.
Anyways, I decided to give it a try. I started with the docs, and they were really good. I was able to get a site up and running in just a few hours. The best part was the DX – it was perfect. I quickly moved all my Vue components, layouts, and translated them all to .astro. The docs were to the point and had great examples. Also, it had integrations for UnoCSS, generating sitemap, and RSS Feed. For authoring blogs they have support for .md files through Content.
// A sample Astro Component. Frontmatter-like design
---
interface Props {
link: string;
alt?: string;
dontOpenInNewTab?: boolean;
}
const { link, alt, dontOpenInNewTab } = Astro.props;
---
<a
href={link}
target={dontOpenInNewTab ? "_self" : "_blank"}
rel="noopener noreferrer"
title={alt}
class="border-link_border border-dashed border-b-1
hover:border-link_border_hover hover:text-link_text_hover transition-colors
text-link cursor-pointer w-fit"
>
<slot />
</a>
There were some things I wish it had, though. Currently, for handling events and things, we don’t have syntax like @click or onClick. We have to rely on good ol’ <Element>.addEventListener().
Also, I suppose TS type definitions for markdown content could be improved. Currently, data from Astro.props.frontmatter is of type any. It would be nice to be able to define them somewhere or Astro automatically generating types from .md files.
Overall, I’m really happy with Astro. It’s fast, has great DX, and is perfect for static sites.
Until next time, cheers!