English for Qwik Developers
Learn the English vocabulary for Qwik's resumability model: hydration-free loading, lazy loading boundaries, and the optimizer, explained clearly.
Qwik’s core pitch — resumability instead of hydration — is a genuinely different mental model from most frameworks, and developers explaining it to a team used to React or Vue need vocabulary that doesn’t collapse into “it’s just lazy loading.” This guide covers the terms precisely.
Key Vocabulary
Resumability — Qwik’s approach of serializing application state and event listeners into HTML so the browser can “resume” execution without re-running component logic on load, unlike hydration which re-executes everything. “Resumability means the page is interactive on first paint without the framework replaying any component code — that’s the core difference from hydration.”
Hydration (as a contrast term) — the traditional SSR pattern of re-running all component JavaScript on the client to attach event listeners, which Qwik is explicitly designed to avoid.
“Unlike hydration, resumability doesn’t need to re-execute your useVisibleTask$ logic just to make a button clickable.”
$ (dollar sign) suffix — Qwik’s convention marking a symbol as a lazy-loading boundary, telling the Optimizer to extract that code into a separate chunk loaded only when needed.
“Any function you want lazy-loaded needs the $ suffix, like onClick$, or the Optimizer won’t know to split it out.”
Optimizer — the build-time tool that analyzes $-marked code and automatically splits the application into small, independently loadable chunks.
“The Optimizer generated way more chunks than expected — we probably have too many small $ boundaries that should be consolidated.”
useVisibleTask$ — a Qwik hook that runs code when a component becomes visible in the viewport, the closest analog to a client-side useEffect, but explicitly opt-in and lazy-loaded.
“We only reached for useVisibleTask$ because the chart library needs direct DOM access — for anything else, a computed signal is the better fit.”
Signal — Qwik’s reactive primitive for state that automatically triggers fine-grained DOM updates without re-rendering a whole component tree. “The counter is a signal, so updating it only touches the specific text node bound to it, not the surrounding component.”
Common Phrases
- “Is this actually resumable, or did we accidentally introduce a hydration-style re-render?”
- “Does this function need a
$suffix, or is it fine to run eagerly?” - “How many chunks did the Optimizer generate for this route — is that reasonable?”
- “Could this be a signal instead of triggering a
useVisibleTask$on every change?” - “Is this JavaScript actually loading lazily, or is it bundled into the initial payload?”
Example Sentences
Explaining resumability to a team new to Qwik: “The key idea is that Qwik doesn’t hydrate — event listeners are already attached from server-rendered HTML, so nothing needs to re-run just to make the page interactive.”
Reviewing a PR with excessive eager loading:
“This component isn’t using any $ boundaries, which means the whole thing loads upfront — we should extract the modal’s logic into its own lazy-loaded symbol.”
Reporting a performance regression:
“Bundle size grew because someone removed the $ suffix from an event handler while refactoring, so the Optimizer stopped splitting it into a separate chunk.”
Professional Tips
- Contrast resumability with hydration explicitly when explaining Qwik to newcomers — the term alone doesn’t convey the distinction without the comparison.
- Point out missing or unnecessary
$boundaries in code review by name — it’s the single most common Qwik-specific review comment. - Use signal rather than “state” when precision matters, since Qwik’s fine-grained reactivity model behaves differently from whole-component re-renders in other frameworks.
- Reference the Optimizer’s chunk output when discussing bundle size, since it’s the mechanism actually responsible for what gets split versus bundled.
Practice Exercise
- Explain resumability to a React developer in two sentences, contrasting it with hydration.
- Write a code review comment asking whether a handler needs a
$suffix. - Describe, in your own words, what a signal is and how it differs from typical component state.