Syntapse Qwik Playground
Resumable web apps
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
Hydration: Reinitializes the entire app on the client, causing performance overhead due to double execution.
Resumability: Resumes from the server-rendered state, avoiding double execution and reducing JavaScript payload, resulting in faster, more efficient interactivity.
Time for a
qwik intro?
You can count
on me
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
- Questions or just want to say hi? Chat on discord!
- Follow @QwikDev on Twitter
- Open issues and contribute on GitHub
- Watch Presentations, Podcasts, Videos, etc.