DEV Community

Alex Spinov
Alex Spinov

Posted on

Qwik Has a Free Framework That Ships Zero JavaScript by Default

Every JavaScript framework ships JS to the browser. Qwik doesn't — it ships HTML and lazily loads JavaScript only when the user interacts. This is called "resumability" and it eliminates hydration entirely.

Here's why Qwik changes the performance game in 2026.

What Qwik Gives You for Free

  • Resumability — no hydration step, instant interactivity
  • Automatic lazy-loading — JS loads on interaction, not on page load
  • Qwik City — full meta-framework with routing, data loading, middleware
  • React-like JSX — familiar syntax, radical new execution model
  • O(1) startup time — performance doesn't degrade with app size
  • Built on Vite — fast dev experience

Quick Start

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

Resumability vs Hydration

Traditional frameworks (React, Vue, Svelte):

  1. Server renders HTML
  2. Browser downloads ALL JavaScript
  3. Framework re-executes components (hydration)
  4. Page becomes interactive

Qwik:

  1. Server renders HTML + serializes state
  2. Page is immediately interactive
  3. JS loads only when user clicks/types (lazy)
  4. No hydration step ever happens

The Dollar Sign: Lazy Loading Boundaries

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

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

  return (
    <button onClick$={() => count.value++}>
      Count: {count.value}
    </button>
  );
});
Enter fullscreen mode Exit fullscreen mode

The $ suffix marks lazy-loading boundaries. The onClick$ handler's code isn't downloaded until the user actually clicks the button.

Server-Side Data Loading

// src/routes/dashboard/index.tsx
import { routeLoader$ } from '@builder.io/qwik-city';

export const useUserData = routeLoader$(async (requestEvent) => {
  const userId = requestEvent.cookie.get('userId')?.value;
  const user = await db.users.find(userId);
  return user;
});

export default component$(() => {
  const userData = useUserData();

  return (
    <div>
      <h1>Welcome, {userData.value.name}</h1>
    </div>
  );
});
Enter fullscreen mode Exit fullscreen mode

Actions (Mutations)

import { routeAction$, Form } from '@builder.io/qwik-city';

export const useAddTodo = routeAction$(async (data) => {
  await db.todos.create({ title: data.title });
  return { success: true };
});

export default component$(() => {
  const action = useAddTodo();

  return (
    <Form action={action}>
      <input name="title" />
      <button>Add Todo</button>
    </Form>
  );
});
Enter fullscreen mode Exit fullscreen mode

Performance: Why Size Doesn't Matter Anymore

App complexity React TTI Qwik TTI
Simple (1 component) 50ms 10ms
Medium (50 components) 200ms 10ms
Large (500 components) 2000ms 10ms
Enterprise (5000 components) 10000ms+ 10ms

Qwik's time-to-interactive is constant regardless of app size because it never hydrates.

Who's Behind Qwik

Created by Miško Hevery — the same person who created Angular. Qwik is his answer to the hydration problem he's been thinking about for 15 years.

Backed by Builder.io with full-time engineering team and enterprise support.

The Verdict

Qwik is the first framework to truly solve the JavaScript performance problem at scale. If your app serves users on slow connections or mobile devices, Qwik's resumability model delivers instant interactivity that no amount of React optimization can match.


Need help building production web scrapers or data pipelines? I build custom solutions for startups and enterprises. Reach out: spinov001@gmail.com

Check out my awesome-web-scraping collection — 400+ tools for extracting web data.

Top comments (0)