Why I Migrated to Astro from Gatsby

TLDR; Boredom. Also to learn something new.

In last couple of months I’ve been migrating this website from Gatsby to Astro. Migration took me around 15h and that includes learning Astro from start.

What is Astro?

Astro and Gatsby are both static site generators, but they have different approaches and features. It compiles your site into highly optimized static assets, but unlike Gatsby, it doesn’t generate full HTML for all pages. Instead, it generates JavaScript bundles and loads only the necessary components for a given route, which can lead to faster initial loading times. In theory at least.

Their website says it is an all-in-one web framework for building fast, content-focused websites. And it is. Features that got me interested was server-first API design, zero JS by default, edge-ready and UI-agnostic. Read more about the framework and its key features here.

Why did I do it?

I got tired of Gatsby and its weird content data model which rely on GraphQL. My projects, articles and recommendations were stored in JSON and I had to jump through static GraphQL queries to fetch data.

And I wanted to learn something fresh and new. And I was a bit bored.

What am I liking best about Astro?

It is really fast. And JSON is a first-class citizen.

Astro introduces its own concept of components, which are more focused on static site generation and partial hydration. Instead of sending the entire JavaScript bundle for a page, only the necessary components are hydrated, improving initial load times.

Beside providing Astro components, you can use any other JS components - either from React, Vue or Svelte. This means that I was able to quickly use my existing ustom React components from Gatsby here.

MDX support almost out of the box as well as easy syntax highlighting was a plus too.

Writing article should be much quicker. Not sure if this has any real benefit as I’m currently at a rate of one article per year 🙈.

What am I disliking?

Using existing React components 🤪 Why? Because code structure for Astro components looks nicer and everything works out of the box - like experimental browser view transitions. For React components I need to do extra coding to get page /content transition to work.

If you like this article consider tweeting or check out my other articles.