Qwik: Betting on Resumability Instead of Hydration

Qwik from Builder.io proposes a radically different model: resumability instead of hydration. In traditional SPA (React, Vue, SvelteKit), the browser downloads JS bundle + “hydrates” HTML state. Qwik serialises state in HTML and resumes from where the server left off. Initial bundle near zero. If this sounds revolutionary, it’s because it is — though with trade-offs.

What Resumability Is

Traditional model (hydration):

Server: renders HTML
Client: downloads HTML + JS bundle (100-300KB)
Client: parses JS, reconstructs state, attaches handlers
Client: now interactive

Qwik model (resumability):

Server: renders HTML + serialises state and event handlers
Client: downloads HTML (no JS upfront)
Client: HTML is interactive immediately — listens to events
Client: when event occurs, downloads JUST the needed code

Result: Time to Interactive near zero.

Component Example

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

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

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

The $ in onClick$ is the critical symbol — signals it’s lazy-loaded. Optimiser splits into separate chunks.

Measured Performance

Typical benchmark on blog page:

Particularly dramatic on mobile with slow network.

Qwik City

Framework on Qwik (like SvelteKit on Svelte):

• File-based routing.
• Loaders and actions like SvelteKit.
• SSR default.
• Adapters: Vercel, Cloudflare, Netlify, Node, static.
• Islands-like but different concept.

// src/routes/users/[id]/index.tsx
import { component$ } from '@builder.io/qwik';
import { routeLoader$ } from '@builder.io/qwik-city';

export const useUser = routeLoader$(async (requestEvent) => {
  return await db.user.findById(requestEvent.params.id);
});

export default component$(() => {
  const user = useUser();
  return <h1>{user.value.name}</h1>;
});

Developer Experience

• React-like: JSX, components, hook analogues.
• Migration from React: conceptually similar but substantial code changes.
• First-class TypeScript.
• Vite-based: fast HMR.
• DevTools: standard Chrome.

Qwik vs Astro

Both edge-first with performance:

Astro for content sites. Qwik for apps with significant interactivity but optimal TTI.

Where Qwik Shines

• E-commerce: performance = revenue.
• Content with interactivity: news sites, blogs with comments.
• Mobile-first: where TTI matters most.
• SEO: LCP impacts ranking.
• Low-bandwidth users: zero bundle is game-changer.

Where It Doesn’t Fit

• Heavy React-invested team: migration cost.
• React-dependent ecosystem: libraries work with care.
• Very client-heavy apps: still load code eventually.
• Realtime collab tools: streaming state flows differently.

Builder.io Integration

Qwik created by Builder.io, integrates with their visual CMS:

• Visual editing: no-code-like.
• A/B testing: built-in.
• Content management: headless CMS.

For non-technical teams + devs, attractive combo.

Ecosystem

Fewer libraries than React but growing:

• Component libraries: Qwik UI, Modus.
• Forms: modular-forms.
• State management: built-in signals sufficient most cases.
• Testing: Vitest + Playwright.

Gaps vs React but sufficient for many apps.

Limitations

Honest:

• Mental model shift: $ syntax, lazy boundaries.
• Debugging: async boundaries can confuse.
• Small ecosystem: still.
• Hiring: small pool.
• Library compatibility: React libs need integration layers.
• Risk: bet on new paradigm.

When to Adopt

• Greenfield performance-critical projects.
• Teams open to new paradigms.
• Builder.io customers natural integration.
• Edge deployment where cold start matters.

When to Wait

• Stable enterprise stacks: too new.
• Hiring challenges: limited pool.
• Complex state apps: not yet battle-tested at same level.

Detailed Comparison with SvelteKit

Both React alternatives but different:

• Svelte: compiler approach, smaller bundles but still hydration-based.
• Qwik: resumability approach, even smaller initial.
• Both: excellent DX, SSR, deploy anywhere.

For extreme performance, Qwik. For more mature ecosystem, SvelteKit.

Deployment

npm create qwik@latest my-app
cd my-app
npm install
npm run dev

# Deploy
npm run build
npm run deploy.cloudflare  # or vercel, etc

Reliable adapters.

Real Cases

• Builder.io: marketing site on Qwik.
• Daily.dev: partial adoption.
• Some e-commerce migrations reporting performance wins.
• OSS showcase at qwik.dev.

Still early adoption.

Conclusion

Qwik is the most radical frontend-performance optimisation proposal in years. For greenfield projects with performance obsession, valid choice. The “zero bundle” is real and dramatic in real-world metrics. Limitations in ecosystem and mental-model shift are real costs. For most SPA projects, SvelteKit or Astro remain safer 2024 choices. But Qwik is interesting playground that will influence mainstream frameworks — resumability concept is being adopted by others too.

Follow us on jacar.es for more on Qwik, frontend frameworks, and web performance.