Ive been using GatsbyJS for a couple years now. But with no major updates on the horizon since it was acquired by Netlify, Ive been growing concerned for long-term support. NextJS and Remix could have been options, but I wanted to stick to a framework that's more geared towards static websites. I kept seeing Astro popup on Hacker News every couple weeks, so I figured Id give it a try. After a week of experimenting, I ultimately gave up and moved back to Gatsby, but I wanted to share my thoughts.
What I like about Astro
It’s static first by design
Astro’s approach is similar to Gatsby and Jekyll. There’s little overhead, and allows you to write clean HTML without a lot of muddled JavaScript in. By default, astro build also generates a folder of static website files I can just upload to any web host. I don't need any special web services or edge functions to make a basic website work.
A framework agnostic framework
One of the best things about Astro is its ability to be paired with anything. It supports React, Preact, Vue, Svelte and even frameworks like Alpine. It’s meant to be a static generator foremost.
Easy Markdown/MDX Integration
Markdown with syntax highlighting work almost out of the box. All I needed to do was run a single command, and everything just worked. Gatsby requires a number of plugins and using graphQL. Even NextJS required a lot of messing around with configurations, setting up remark and retype plugins, and dealing with frontmatter metadata.
It’s really, really fast
Gatsby takes about 3 minutes to rebuilt my whole site from scratch, while pulling in data from Ghost. With Next I got it down to 1.5 minutes. Astro took about 20 seconds. Besides build times being fast, navigating between pages also feels really fast. Astro allows for opting in to prefetching on just about anything. By turning on prefetchAll you can make page navigations feel instant, similar to Next’s Link capabilities, but on a much larger, customizable scale.
What I didn’t like
As much as I want to se Astro, I ended up not converting over, and will be sticking with Gatsby for the foreseeable future with Ghost. In a nutshell, it just doesn’t feel ready for any complex site that utilizes anything more then markdown.
No built-in state Management
I’ll be honest, Ive gotten a little spoiled with relying on basic state management with React hooks. With only a few lines of code, it’s easy to implement useState for simple things. With fancy features like page transitions already built in, it just feels weird to not also have access to states with our relying on React/Preact or similar. Astro recommends Nano Stores, another framework agnostic library, which is easy enough to set up, but it would have been nice to have this built in, or at the very least, an option during set up like they already do with TailwindCSS.
Server Side functions still has a way to go
Astro at its core is a static site generator. But when building websites nowadays there’s a growing need to occasionally still run backend code. For my site, I needed to create a few server-side functions for creating some basic API requests, mainly around handling newsletter subscribers with Ghost. This was straightforward Next and even Gatsby, but for the life of me, I couldn’t get it to work with Astro.
While Astro has support for server side endpoints, again sticking to being platform agnostic, I needed to install an adapter for Netlify to run edge functions… I get why, but I couldn’t find a good way to test locally, and in the end I couldn’t even get it to work. I didn’t even see any errors to be able to troubleshoot the issue. I suspect this was because I was trying to run in hybrid mode to serve most of the pages as static. But again, with nothing in the logs, there was nothing to even diagnose. For being relatively new tech stack combo, I also couldn’t find many resources to help. If I had more time, Im sure I could find a solution, and I may try to tackle the issue again in the future, but for projects with limited time, I want something that is a bit more reliable, or at least better error handling for server-side.
Some Assembly Required
Starting from scratch feels easy at first. And converting previous custom React components was straight forward when just a few props needed to be passed in. But then it feels weird to even choose Astro when I can just use something like Next or Remix. If I would be starting a brand new website that was static only and required little dynamic functionality, I would choose Astro in a heart beat. If I would want to create a PWA or basic web app though, Id still stick to another JavaScript framework like Next.js.
There’s also not a lot of documentation or examples on more complex functionality. For example, while trying to move from Gatsby, I wanted to create a somewhat complex set of paginated posts with categories using Astro’s GetStaticPathsOptions. I could generate pages for categories and pages for pagination, but not at the same time. In the end, I never found a way to do both, at least not without ending up with a lot of duplicate code.
Final Thoughts
Using Astro as a frontend replacement for a Headless CMS like Ghost will be a hard pass for me, at least for now. There’s just too much missing and things I need to install to make it compete with existing frameworks for now. But I also understand I was trying to use the framework more as a progressive web app, and comparing it to a javascript framework isn’t really fair.
Astro is a great modern static site generator. Probably the best Ive used since Jekyll. It’s exactly what I wanted about 10 years ago. With components, ease of setting up CSS frameworks like Tailwind, getting started creating a purely static site can be a breeze. I have no doubt I’ll be building at least a few sites with Astro that I would have otherwise built with Gatsby/Next or even a simple WordPress site. I may even revisit pairing it with Ghost again in the future if I ever find the time.
