DEV Community

Alex Spinov
Alex Spinov

Posted on

Qwik Has a Free Resumable Framework — Zero JavaScript on Page Load

Qwik doesn't hydrate — it resumes. Your page loads with zero JavaScript, then lazily loads only the code the user actually interacts with.

The Hydration Problem

Every other framework works like this:

  1. Server renders HTML
  2. Browser downloads ALL JavaScript
  3. Framework re-executes everything to make it interactive

This means your users download and execute JavaScript they may never need. A button in the footer? Its handler loads on page load.

Qwik eliminates this entirely.

How Resumability Works

Qwik serializes the application state and event listeners into the HTML itself. When the page loads:

  • 0 KB of JavaScript executes
  • HTML is immediately interactive (via service worker)
  • When user clicks a button → only THAT handler's code downloads
  • Code loads in ~50ms (sub-component granularity)

What You Get for Free

Instant page loads — Time-to-Interactive equals Time-to-First-Byte
Automatic code splitting — every function boundary is a lazy-load boundary
React-like syntax — JSX, components, hooks (useSignal, useTask$, useVisibleTask$)
Qwik City — meta-framework with file-based routing, data loaders, server actions

Quick Start

npm create qwik@latest
cd my-app
npm start
Enter fullscreen mode Exit fullscreen mode

Real Numbers

A typical React SPA loads 200-500KB of JS on first paint. Same app in Qwik:

  • First load JS: <1KB
  • TTI: ~50ms (vs 2-5 seconds with React)
  • Lighthouse score: 100 (consistently)

The Dollar Sign Convention

Qwik uses $ to mark lazy-load boundaries:

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

export const Counter = component$(() => {
  const count = useSignal(0);
  return <button onClick$={() => count.value++}>{count.value}</button>;
});
Enter fullscreen mode Exit fullscreen mode

The $ after onClick means: "don't load this handler until the user clicks." The framework handles everything else.

If your site has pages where most users never scroll below the fold — Qwik eliminates 90% of wasted JavaScript.


Need web scraping or data extraction? Check out my tools on Apify — get structured data from any website in minutes.

Custom solution? Email spinov001@gmail.com — quote in 2 hours.

Top comments (0)