Key Concepts

Resumability

No hydration — state is serialized to HTML and resumed on demand

Lazy Loading

Every event handler and component is lazy-loaded. O(1) startup

Signals

Fine-grained reactivity — only re-renders what changed

Server Functions

server$() for type-safe RPC between client and server

Quick Start

npm create qwik@latest
cd my-app && npm install && npm start

Component Example

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

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

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

Server Function (RPC)

import { server$ } from '@builder.io/qwik-city';

const getUsers = server$(async () => {
  // runs on server only
  const db = await connectDB();
  return db.query('SELECT * FROM users');
});

export const MyComp = component$(() => {
  const users = useSignal<User[]>([]);
  return (
    <button onClick$={async () => {
      users.value = await getUsers();
    }}>
      Load Users
    </button>
  );
});

Qwik vs React

Feature	React	Qwik
Hydration	Full hydration	Resumable (none)
JS sent to client	All component code	Lazy on interaction
State	useState, hooks	useSignal, useStore
Reactivity	VDOM diff	Signal-based

Qwik Framework Guide