Follow us
Breaking
Tech News

A beginner’s guide to the Qwik 1.10 resumability surge

Qwik 1.10 utilizes resumability to achieve an O(1) JS payload by serializing application state instead of re-running component logic. This approach provides instant-on startup performance and differs significantly from the islands architecture used by Astro.

Share

Qwik 1.10 includes an Anti-AI Usage Clause. Usage with any AI coding agent is strongly discouraged because the log output may confuse the agent. This release coincides with a broader industry focus on how frameworks handle interactivity. Qwik uses resumability to reduce the JavaScript and hydration work required before a page becomes interactive. Instead of re-running component logic in the browser to hydrate server-rendered HTML, Qwik serializes the application state and event data. This allows the browser to resume only the code needed for a real interaction. This technique results in an O(1) JS payload regardless of how many components you add. Qwik’s resumability differs from the progressive hydration seen in traditional SSR frameworks. Progressive hydration treats the page as one tree and decides the order in which to hydrate its branches. Qwik avoids this by making every event its own island. This approach prevents the need to re-execute component code on the client. I find that Qwik achieves instant-on startup performance no matter how complex the application is. Because Qwik uses speculative module fetching, it can prefetch the current page’s JS modules in a background thread through the service workers and retrieve those modules from the browser’s cache when the user interacts with the application. This strategy reduces network waterfalls. Qwik is a unique framework that is both an MPA and an SPA at the same time. I find that this makes the decision between an SPA or an MPA a decision made for every link.

Comparing Astro, Next.js, and Qwik

Teams choosing between Next.js, Astro, and Qwik must understand how they handle the initial load. Astro uses an islands architecture where small, independent zones of interactivity ship their own JavaScript and hydrate on their own schedule, so the rest of the page stays as plain HTML that requires zero client-side JavaScript. This approach can shrink the JavaScript footprint by 80% to 90% because the rest of the page stays as plain HTML. React Server Components keep a unified tree but mark individual components as server-only. Qwik rejects hydration entirely. Qwik serializes listener references into the HTML and uses a tiny global listener to look up and load chunks on demand. The $ symbols in syntax like component$ or onClick$ serve as lazy-load boundaries. These markers tell the optimizer to split the application into many small pieces to ensure efficient loading. You should know these symbols do not relate to jQuery, Svelte or jQuery. The $ syntax is a source of developer complexity. Can developers manage the complexity of these lazy-load boundaries without losing productivity?

Feature Islands (Astro) Resumability (Qwik)
JS Payload Only for marked islands O(1) constant time
Hydration Per-island, on directive Rejects hydration entirely
Logic Execution On load, idle, or visible On user interaction

Astro shipped Server Islands in late 2024. These let you mark a component as deferred with a fallback that ships in the initial HTML. The component renders on the server when its slot fetches in, then swaps in. This removes the constraint where a page has to wait for slow or per-user data to render. This allows the page to remain cacheable at the edge. Qwik instead focuses on the execution cost of hydration. Because Qwik serializes the internal state of the framework, it can resume the application without re-executing component code. I find Qwik the best choice for sites where time-to-first-byte and time-to-interactive matter equally.

Managing the migration to Formisch

The choice depends on the page type. Islands and resumability work well for content-heavy sites like blogs or e-commerce product pages. For heavily interactive apps, a unified component tree is a better fit. If you are working with Qwik, you likely need to move from Modular Forms to Formisch. Formisch targets Qwik v2 and uses a single Valibot schema to provide TypeScript types, runtime validation, and form structure. Modular Forms is in maintenance mode and targets the older @builder.io/qwik package. You must update to Qwik v2 first before converting forms to Formisch. Qwik provides an automated migration command that updates package names and identifiers across your project. In Modular Forms, everything was spread across type parameters, loaders, adapters and typeprops. In Formisch, everything comes from a single Valibot schema. Modular Forms addressed fields using dot-notation name strings like name="todos.0.label", while Formisch uses type-safe path arrays such as path={[‘todos’, 0, ‘label’]}. Modular Forms exposed state as store properties like loginForm.submitting, but Formisch exposes signals that users read with .value, such as loginForm.isSubmitting.value. The useForm function in Modular Forms requires a loader and returns a tuple with pre-bound components, whereas Formisch’s useForm$ takes a function returning the config and returns only the form store. You can pass initial values as initialInput. I find that switching to Formisch makes the transition to Qwik v2 much cleaner.

Share

Technewsdaily

Senior tech writer covering AI, gadgets and cybersecurity. Breaking down the news that matters, every day.