Max Gfeller All Articles
August 31st, 2022

Astro vs Qwik

Development
Web
Astro
Qwik

I just came back from the wonderful and enlightening Front Conference in Zurich. I was there speaking about what Headless Components exactly are and why you should definitely be using them.

At the conference there were two talks about new frontend technologies, namely about Astro and Qwik. As a frontend developer i have previously heard about them but didn't really get a chance to take a deeper look yet. Also, i was not really sure how the two differ from each other as they have a very similar promise: shipping less Javascript to the client.

In this post i will try to explain the differences between Astro and Qwik and how they can be used to solve the problems that are currently present in the frontend development world. Because, as it turns out, the two frameworks have very different use cases. Everything i know so far i learned from the two conference talks as well as their project's respective documentation pages. That being said, i'm definitely not an expert in either of them - just curious about new frontend technologies.

Qwik

On the first day we had a talk about Qwik from one of its developers, Manu Martinez-Almeida. He started his talk with the history of web applications: how we got from multi page sites to single page applications - and back. And all the problems with the current approach: the fact that we have to use a lot of Javascript to run the application. How the current approach with SSR (Server Side Rendering) and (partial) hydration is still not optimal insofar as it is a huge overhead and the application basically is rendered twice.

He then started to talk about how they want to solve this problem with Qwik, the framework they are building at Builder.io. Manu went out of his way to avoid talking about their direct competitor: Next.js. Because everything Qwik does is very inspired by the currently biggest React application framework. The syntax and developer experience in general is familiar for React developers and a lot of the concepts are clearly taken from the Next.js framework - namely hooks, context, and routing. There is even a cheat sheet that documents that shows how components can be built with both React and Qwik - as you can see they don't differ much.

However, Qwik does one thing very differently: instead of relying on a Virtual DOM, it is built in the same way as Svelte, Solid and the whole generation of newish frontend frameworks and is compiled to vanilla Javascript. As for SSR, it introduces a concept called "Resumability" which means that server-rendered Qwik applications don't need hydration and are instantly usable. The application's state is serialized on the website and can be restored from the client. Ultimately, there is not much Javascript needed on the client anymore.

It also claims to have O(1) complex scalability which means that now matter how big your application gets, the boot time does not increase significantly. This is pretty cool because with Next.js applications, the time to interactive is heavily influenced by the size of the application that first needs to boot.

Astro

Nate Moore is a Senior Software Engineer at The Astro Technology Company where he is building the Astro framework. In his talk he explained the ideas behind Astro and what you can use it for. The talk was very interesting and i was really curious to see how they approached the problems they are trying to solve.

Astro is, per its own definition, an all-in-one web framework for building fast, content-focused websites. It is also "server-first", meaning that most of the HTML is rendered on the server or, more appropriately, pre-generated during build time. This makes the built websites extremely fast. It also allows to have interactive components that are rendered on the client, which can be built using any of the modern frontend libraries (Vue, React, Svelte, Solid etc.).

Those interactive UI components which are rendered on an otherwise static HTML page are referred to as Astro Islands and render in isolation. Here's the great thing about them: they don't block the initial render of the website (unless you need that) and their loading and rendering can be deferred until the user is actually interacting with the page - or until they enter the viewport. This is quite cool and it allows using multiple different frontend frameworks together - in theory it even allows the nesting of components of different frameworks.

Comparison

It's great to see that we slowly but surely get away from the current approach of using Javascript to render web applications which leads to slower initial loading speeds as well as increasingly larger bundle sizes. Both Astro and Qwik are great frameworks and i'm sure that they are the first of a whole new generation of technologies to come.

After comparing them it's clear that while they are solving similar problems, their actual use-cases are quite different. Astro is a great framework for building fast, content-focused websites. Qwik is a great framework for building fast, server rendered interactive web applications.

Both of the teams are doing great work and i'm sure that they will continue to do so. I would surely use both of them and am currently thinking of re-building my personal website with Astro🤔

✌🏻 Did you like this article? Follow me on Twitter for more content!