Still early days but I wanted to quickly share Astro with you.
It’s a new, (very) early beta static site generator that aims to solve all the problems we have with tools like GatsbyJS.
As I’ve shared before, Gatsby is my favorite but I just can’t get the kind of speed results that Google wants anymore (requires an insane amount of tweaking to get it close). For a big site like mine, the bundle sizes are unacceptably large.
It actually defeats the purpose of using Gatsby in the first place, when the speeds you get are in fact slower than a Wordpress site.
Well… Astro allows you to use React but builds a 100% static, HTML site with zero Javascript.
So you could copy a lot of your work over directly from Gatsby - components and all - and Astro will take that and compile it into plain old boring (but lightning fast) HTML. No bloat. Perfect Lighthouse speeds.
But what about components that need hydration?
Partial hydration is like magic in Astro.
You can simply pass client:load, client:visible, client:idle or client:media={QUERY} to any component and it’ll hydrate.
Styling and Javascript in .astro template files is kind of reminiscient of Vue templates (all in the same file and scoped).
I’m very tempted to redevelop my main Gatsby site in Astro, but since it’s still quite new, I’m giving it some more time to mature.
Two things I need to get my head around is how MDX works with it (if it can), and how best to implement Gatsby-esque image components (including in Remark).
But definitely check it out and try building your next project with it.
