Make Astro even Faster

Every time I end up thinking we can’t get faster in the web dev space, some new release comes along and pushes the boundaries of performance even further. The frontend world really focused on loading times and efficiency in the past couple of years, and the results speak for themselves.

Not only are modern apps faster, but the developer experience is also greatly improved.

HTML First

We are now putting a big emphasis on html first, highly optimized results thanks to better architectures and smarter rendering strategies.

To see this in action, let’s start by setting up a new project.

npm create astro@lastest

The idea behind Astro is pretty straight forward. Multi Page Applications are always going to load faster than SPAs thanks to the server doing the initial rendering. So any file under pages (which is the root directory of the file based router that powers Astro projects) is going to be a special component rendered on a Node server and then sent as plain HTML to the browser.

// src/pages/index.astro

import Layout from '../layouts/Layout.astro';
import { Counter } from '../components/counter';

<Layout title="Welcome to Astro.">
  <main>
    <h1>Hello!</h1>
    <Counter />
  </main>
</Layout>

<style>
  main {
    background: #141418;
    text-align: center;
  }
</style>

As a result, your app will be HTML first, and will rely on zero JavaScript in order to START FAST and present meaningful information to your users.

Of course, this makes your app static, meaning that users can interact with pages only via links and forms. However, this is not really the way most modern apps are behaving these days. Rich user interfaces and seamless user experiences are relying heavily on JavaScript usage and async communication with the server.

Island Architecture

Astro has an elegant solution for this. Leveraging the island’s architecture it employs partial rendering to sprinkle in interactivity on demand. In other words, it uses one of the many UI integrations to first render interactive components on the server, send them over to the browser as plain html, and then re-execute those components code on the frontend to attach the event listeners and the state required for interactivity. You can control when these components are re-executed (or hydrated) via one of the many supported client directives.

So the client will immediately see your App as a static site and then, based on CSS media query rules or the visibility status parts of your app become interactive on demand.

This was a huge step forward compared to previous alternatives, but of course, we can do better than that!

Hydration

Enter the Qwik team. These guys looked at the previous model and figured out something was wrong - hydration (be it complete or partial) runs the code twice. This has various implications, the most obvious being that we are wasting resources and milliseconds executing code on the frontend. So the solution is simple - remove the hydration step! Well.. in software development simple does not imply “easy” and they came up with a really clever concept called resumability.

npx astro add @qwikdev/astro

The server rendered HTML contains special markup which is then used by the browser to understand the current state of your app, and resume work from where the server left off.

// src/components/Counter.tsx
import { components, useSignal } from "@builder.io/qwik";

export const Counter = component$(() => {
  const counter = useSignal(0);

  return <button onClick={() => counter.value++}>{counter.value}</button>;
});

There are many other optimisations performed by Qwik, ranging from an aggressive code splitting strategy used for fine-grained lazy loading to “streaming” JS files on service workers to avoid blocking the UI thread.

The result is an HTML first, zero JavaScript app which offers interactivity through the most performant strategies existing in the market today.

The inspiration for this feature is this great article written by Jack Shelton who is also the person we have to thank for this integration between Qwik and Astro.

I briefly touched on topics such as hydration or resumability on my youtube chanel. These are fascinating concepts powering all modern apps. Check out some of the other videos on my channel if you want to fully understand some of the tools we are working with these days.