Astro
2022-09-17
TL;DR:
Astro kicks Next.js in the butt when it comes to initial loading times.
This site’s landing page:
| Application framework | Shipped JavaScript | Load time in Chrome |
|---|---|---|
| Next.js | 55 kB | 100-300 ms |
| Astro | 0 kB | 45-65 ms |
More details
I’ve read about Astro for some time and decided that I wanted to try it out. Especially the islands architecture and the no-JS-by-default direction is something I think we’re headed more and more towards. Even though I’ve been writing SPA’s for the last 10 years or so I like the idea of server-rendering web-pages. But I also like to have React available when the UX would demand it or when it would be the easiest way to render a data structure into HTML (I really love JSX!).
It feels like we’ve come full circle now. We started out with server-rendered pages, which was what we had at the time. Then once JavaScript took off and we could and fancy UX with jQuery we started sprinkling that onto the server-rendered pages (I still remember the first time someone showed me AJAX - magic!).
And then came the SPA’s, and I did web pages in Angular.js for a couple of years. It felt awesome to be able to build a desktop-like application but on the web. The possibilities for user interaction were endless! Sad to say, it wasn’t a great experience for users with slower devices. Or for SEO. And probably users would have appreciated a faster web site overall compared to that “app feeling”.
And of course React followed, and it seems to have become more or less an industry standard. We even have frameworks that build on top of React (and Vue and Svelte of course). I’m thinking about Next.js, Remix, Astro and more. Gone are the days where you would write your own SSR with Redux, re-hydration, Express.js. Now you pick a tool, or framework, and build your application with(in) it.
And as you use the tool it decides whether the page should be server-rendered, streamed to the client, or client-side rendered, and you don’t really have to care! I think it’s fantastic and can’t wait to see where we’re at in a few years time.
This was a long preamble to what I really wanted to get to: I’ve re-written this site with Astro. Previously it was running on Next.js for no reason whatsoever except that it seemed like a simple way to get a React app up and running with SSR. I like many things about Next.js: it’s easy to work with, and well-documented. I don’t think it’s very fast though, and it seems to ship an unhealthy amount of JavaScript even though it renders a (mostly) static site SSR site.
This site as a Next.js application ships 55.1 kB of JavaScript on the landing page - a static page with no JS interactions at all.
Deployed on Vercel, it loads in about 100 ms - 300 ms. Yes, there is a picture and a CSS library loaded as well which might hurt the load times a bit. The picture isn’t even optimized - gosh!
It took me about two hours to read up on, install, configure and migrate stuff to this new Astro project.
This site as an Astro application ships 0 kB of JavaScript on the landing page - as it should be.
Deployed on Vercel, it loads in about 45 ms - 65 ms. Yes, there is a picture and a CSS library loaded as well. That’s twice as fast!
