Image thunder

Syntapse Qwik Playground

Resumable web apps

Explore the docs

Resumability vs. Hydration

Hydration is the process where server-rendered HTML is converted into a fully interactive web application on the client side. When a user visits a site, the initial HTML is generated by the server and sent to the client. The client then downloads and executes JavaScript to "hydrate" the application, reattaching event listeners and initializing components to make the page interactive. This can be resource-intensive and slow, especially for large or complex applications, as it involves running much of the same code twice—once on the server and once on the client.

Resumability, introduced by frameworks like Qwik, eliminates the need for hydration by allowing the application to "resume" from where the server left off. During server-side rendering, the application's state is serialized and embedded in the HTML. When the client loads the page, it picks up this state and only activates the necessary parts of the application, avoiding the need to reinitialize everything. This approach significantly reduces the amount of JavaScript that needs to be downloaded and executed, leading to faster load times and better performance.

Summary

Time for a
qwik intro?

Press and hold the ALT/Option key to activate 'Click-to-Source' mode

You can count
on me

70

CLI Commands

npm run dev
Starts the development server and watches for changes

npm run preview
Creates production build and starts a server to preview it

npm run build
Creates production build

npm run qwik add
Runs the qwik CLI to add integrations

Example Apps

Have a look at the Flower App or the Todo App.

Community