Qwik: Resumability vs. Hydration

In 2022, we're all fighting the same enemy: Hydration. Whether it's React, Vue, or Svelte, every framework follows the same pattern:

1. Server renders HTML.
2. Browser downloads JS.
3. Browser executes JS to "hydrate" the HTML (rebuilding the VDOM and attaching event listeners).

This "Hydration Tax" is the reason your site is slow on mobile. Qwik proposes a different way: Resumability.

What is Resumability?

Resumability means the browser can pick up exactly where the server left off without executing any JavaScript on startup.

How it Works: Serialized State

Qwik serializes everything—the component state, the event listeners, and even the framework's internal metadata—directly into the HTML.

<button on:click="./chunk_a.js#handleClick">
  Click Me
</button>

When you click the button, Qwik sees the on:click attribute, fetches the tiny chunk_a.js file, and executes only that specific function. No hydration, no global state reconstruction.

The $ Suffix

In Qwik, you'll see the $ symbol everywhere. This is a signal to the Qwik optimizer to split that code into its own lazy-loadable chunk.

import { component$, useStore } from '@builder.io/qwik';

export const Counter = component$(() => {
  const store = useStore({ count: 0 });

  return (
    <button onClick$={() => store.count++}>
      Count: {store.count}
    </button>
  );
});

Why This Wins in 2022

Qwik is the only framework that can consistently deliver a 100/100 Lighthouse score regardless of how large the application becomes. Because it only downloads and executes the JS needed for the user's current interaction, the initial bundle size is effectively zero.

In 2022, Qwik is challenging the fundamental assumption that we need to "re-run" our app in the browser. It's not about being fast; it's about being instant.