Our experience with Astro
We built divRIOTS.com with Astro. “Here we go, another framework is out and another dude is making a website and blogging about it”
Let’s see if we can make this interesting. 😉
What is Astro?
If you already know Astro, you can skip to the next chapter.
Astro is a Static Site Generator (SSG). Build your pages in
.astrofiles (very close to HTML/JSX) and sparkle them with React/Vue/Preact/Svelte components. It deals with file-based routing and templates neutrally. Bring your component framework. In my words
There is more to it. See Astro’s introduction blog post.
And if you have time, there is a 90min video and Transcript about it.
Why we chose Astro
Not because it’s the new/latest shiny framework 😀
I shared my thought in April when I first saw Astro.
I have seen @astrodotbuild this morning. The upcoming "meta web framework" from @skypackjs team (@FredKSchott, @matthewcp, @n_moore and maybe other I don't know 😅)— Georges (@georges_gomes) April 10, 2021
I think it's showing us something important. Here is my humble take on it and the emerging meta frameworks
When it was time to develop the new divRIOTS.com website, we searched for the best option.
Our requirements were:
- Simple - It’s not going to be a massive site.
- Generate 100% static HTML - Good performance, good SEO.
- File-based routing - Very convenient
- Allow component-driven development - That’s how we like to build
- Markdown support - For the blog posts
There are many static site generators. But, believe it or not, there aren’t many options matching our requirements.
divRIOTS.com is built in 100% Astro.
No React, No Vue, No Svelte, None of the partial hydration or islands capabilities of Astro.
You don’t need to use the cutting-edge hydration capabilities of Astro to already benefit from it.
Astro comes with an elegant component model and a solid CSS pipeline with Scoped CSS, CSS Modules, and Sass support.
Astro’s CSS Bundling is probably its most underrated feature. It never makes it to the headline but it’s by far my favorite!
In Astro, you just layout
<style> tags in your astro components where you need them and add lists of
<link ref="stylesheet"> in your
For example, divRIOTS.com uses 2 global css in
<head> in the most idiomatic way.
<link href="/css/reset.css" rel="stylesheet" /> <link href="/css/global.css" rel="stylesheet" />
None of these
.css files are minified and calling them separately doesn’t provide the best performance result.
But when built for production with
<style> tags and
<link ref="stylesheet"> are minified and bundled automatically.
- If a style only appears on one route, it’s only loaded for that route. (
- If a style appears on multiple routes, it’s deduplicated into a (
In production, pages have:
<link href="/_astro/common-[hash].css" rel="stylesheet" /> <link href="/_astro/mypage-[hash].css" rel="stylesheet" />
/_astro/common-[hash].css is the same on every page. It’s cached and not re-downloaded during navigation on the site. It’s hard to have a better result.
This means that I can write styles the way it makes sense for readability and maintenance and let
astro build take care of best performance.
I don’t know any static site generator capable of doing [pure] CSS Bundling and minification so seamlessly.
More details in Astro’s Styling Guide #bundling.
The output is 100% optimized HTML/CSS. It’s hard to be slow 😀
What’s missing in Astro
In my humble opinion, not much. divRIOTS.com is proof of that.
But here is my wish list:
Like Astro’s CSS Bundling, I would like my
<script> tags transpiled, bundled, chunked, and minified in the best possible way.
- Transpiled : I can write ES202X code and get a more compatible output.
- Bundled : I can import bare modules from
- Chuncked : If modules are used on many pages, move them into a single
With this, I don’t need a webpack or gulp configuration on top of Astro.
Edit#1: 📦 This has been delivered in Astro 0.26 via the implementation of RFC0016.
“Permalink” for certain pages
Today all pages are generated as
/slug/index.html, but some pages need to be generated as
/slug.html instead. Like
Edit#1: 📦 This has been delivered in Astro 0.19:
404.astro will generate a
404.html that most hosting services support.
Astro is more than a SSG
As described in my tweet about Astro, another compelling feature of Astro is his neutrality to frameworks.
It makes your site last longer as component frameworks come and go. It also makes your component last longer as you don’t need to migrate them from one framework to another. Just use them as long as you want.
I called Astro an “Agnostic Meta-Framework”. And I think we will see other solutions emerge in this space because it makes a lot of sense to decouple the meta-frameworks from the rendering libraries.
Another Astro website is here! (Edit#1)
Backlight.dev, our design system platform is now live! The landing is using Astro 1.0 and dynamically hydrated components where needed.
The next site to get the Astro treatment is story.to.design!