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

  1. Explain resumability to a React developer in two sentences, contrasting it with hydration.
  2. Write a code review comment asking whether a handler needs a $ suffix.
  3. Describe, in your own words, what a signal is and how it differs from typical component state.