Qwik is a revolutionary web framework built on resumability — a zero-hydration architecture that serializes application state directly into HTML, allowing instant interactivity without downloading or executing JavaScript upfront. Unlike traditional frameworks that replay application logic on the client (hydration), Qwik pauses execution on the server and resumes exactly where it left off when the user interacts. Components, handlers, and state automatically split into fine-grained lazy chunks loaded on-demand via QRLs (Qwik Resource Locators). QwikCity, the meta-framework built atop Qwik, provides file-based routing, server-side data loading (routeLoader$), form handling (routeAction$), and middleware, all optimized for edge deployment. Qwik's Optimizer transforms $-suffixed functions into lazy boundaries at build time, while the 1KB Qwikloader runtime bootstraps the app with near-zero JavaScript. The framework's speculative module fetching prefetches interaction-relevant code in background threads, and its serialization model (with noSerialize for exceptions) ensures every closure, event listener, and reactive signal can be paused and resumed without re-execution. Designed for maximum Core Web Vitals scores, Qwik excels in content-heavy sites, e-commerce platforms, and SPAs where instant Time-to-Interactive (TTI) is critical — all while maintaining React-like JSX syntax and TypeScript-first developer experience.
What This Cheat Sheet Covers
This topic spans 17 focused tables and 170 indexed concepts. Below is a complete table-by-table outline of this topic, spanning foundational concepts through advanced details.
Table 1: Core Architecture Concepts
Qwik's architecture fundamentally differs from other frameworks by eliminating hydration entirely. Resumability serializes server-side execution state into HTML attributes and comments, allowing the client to pick up exactly where the server left off — no replaying, no re-execution. Fine-grained lazy loading through the Optimizer breaks code into tiny, interaction-triggered chunks referenced by QRLs (lazy import URLs). This table covers the foundational principles that enable Qwik's instant-loading performance, from how resumability works to the Optimizer's role in transforming code at build time.
| Concept | Example | Description |
|---|---|---|
Server serializes state into HTML; client resumes without re-execution when user interacts | Eliminates hydration by serializing framework state and component boundaries into HTML so the client can resume execution precisely where the server paused — no JavaScript runs until user interacts | |
React/Vue replay application logic on client to attach event listeners and rebuild state | Traditional SSR frameworks must download all JS, re-execute components, and reconstruct state to make the page interactive — Qwik avoids this entirely via resumability | |
QRL<Function> contains a lazy-loadable URL like ./chunk-abc123.js plus a symbol name to import | • A lazy reference to a function that can be imported on-demand • the Optimizer generates QRLs automatically for $-suffixed functions, allowing precise code splitting | |
Each onClick$, component$, and useTask$ becomes a separate chunk loaded only when triggered | • The Optimizer splits every $-suffixed closure into an individual chunk• the browser loads only the exact code needed for the interaction that just occurred | |
Transforms onClick$={(e) => {...}} into a QRL pointing to ./onClick_chunk.js at build time | • Rust-based build tool that extracts $-suffixed functions into top-level importable symbols and generates QRLs• runs as part of Vite/Rollup bundler |