> Markdown version of [/videos/307-interactive-server-side-components?t=2060](https://www.wearedevelopers.com/videos/307-interactive-server-side-components?t=2060). Every page supports `.md` or `Accept: text/markdown`. Links point to the HTML versions so they work for humans too. Agent guide: [/agents.md](https://www.wearedevelopers.com/agents.md).

---

# Interactive server side components

Are massive JavaScript bundles ruining your time-to-interactive? Discover how Qwik uses resumability to eliminate initial payloads and achieve instant interactivity without traditional hydration.

- **Speakers:** Miško Hevery
- **Event:** JavaScript Congress
- **Published:** November 23, 2021
- **Duration:** 46:13
- **URL:** https://www.wearedevelopers.com/videos/307-interactive-server-side-components

## Summary

E-commerce and complex web applications often suffer from poor time-to-interactive metrics because traditional frameworks rely on a replayable hydration model. Even with server-side rendering, clients must download and execute massive JavaScript bundles to figure out state and attach event listeners, and standard lazy loading falls short because any visible component still forces code execution. Enter Qwik, a framework designed around the concept of resumability rather than replayability. By executing the application on the server and serializing both the application state and event listeners directly into the HTML DOM, Qwik completely eliminates the initial JavaScript payload hurdle. A tiny, sub-kilobyte bootloader listens for global events, meaning the browser downloads only pure, SEO-friendly HTML up front. When a user interacts with an element, Qwik dynamically fetches only the exact chunk of code required for that specific interaction, utilizing a serialized dependency graph to efficiently update related components without re-rendering the entire page. For developers, Qwik offers a familiar JSX-based authoring experience without the burden of manually defining lazy-loaded boundaries. An intelligent optimizer automatically splits the application into micro-chunks based on real-user interaction analytics, while integration with tools like Partytown allows background code prefetching in web workers. This ensures near-instant interactivity, excellent performance scores, and opens up novel architectural possibilities like freeze-drying a progressive web application's client state directly into HTML for seamless offline resumption.

**Keywords:** qwik framework, interactive server-side components, resumability vs replayability, javascript hydration challenges, time to interactive optimization, server-side rendering capabilities, island architecture limitations, lazy loading boundaries, dom state serialization, inter-component communication, partytown web workers, progressive web apps, seo performance optimization, javascript bundle splitting, builder.io headless cms

## Chapters

1. **Page speed challenges in current e-commerce applications** (00:02) — Slow time to interactive scores negatively impact SEO rankings and e-commerce conversions.
1. **Limitations of replayable frameworks and application hydration** (02:05) — Traditional replayable frameworks require downloading and executing large JavaScript bundles before becoming interactive.
1. **Introducing Qwik and resumable component architecture** (06:02) — Qwik embeds application state directly into HTML to eliminate the client-side hydration step.
1. **Visualizing standard hydration and lazy loading constraints** (08:15) — Visible components on a page force traditional frameworks to immediately download and hydrate their underlying code.
1. **Component communication challenges in island architectures** (10:46) — Breaking apps into smaller monoliths complicates inter-component communication across isolated boundaries.
1. **Fine-grained component waking and state rendering** (12:14) — Serialized listener locations in HTML allow specific components to wake up lazily without rendering their parent or children.
1. **Demonstration of lazy JavaScript fetching on interaction** (14:49) — Tiny JavaScript chunks are selectively fetched over the network only when local click events trigger interactivity.
1. **Implementing lazy boundaries with Qwik optimizer hooks** (19:08) — Developers write standard code while an optimizer breaks components into probabilistic chunks based on user interaction patterns.
1. **Tracking component reactivity and DOM serialization elements** (26:44) — Retaining precise component relationships within HTML minimizes application rendering overhead during browser interactions.
1. **Supporting shadow DOM and web components integration** (30:46) — Serializing shadow roots allows web components to dynamically rehydrate after being executed on the server.
1. **SEO impacts of serving resumable HTML components** (32:31) — Shipping pure HTML applications directly boosts search engine performance by avoiding initial JavaScript execution times.
1. **Working with state libraries and web workers** (34:20) — Migrating operations to a web worker with Partytown enables predictive prefetching without blocking the main browser thread.
1. **Evaluating Qwik as a framework replacement option** (36:04) — Moving away from replayable bootstrap methods makes this framework highly effective for complex website environments.
1. **Managing potential HTML bloat from state serialization** (37:53) — Strategically chunking state scripts across DOM sections enables asynchronous loading to mitigate total payload sizes.
1. **Rendering requests through edge computing functions** (39:26) — Delivering dynamic, personalized interactions at the CDN edge prevents server round trips while preserving physical delivery speeds.
1. **Retaining application state for offline PWA architectures** (41:11) — Freeze-drying active web pages into HTML allows users to instantly resume exact digital workflows between offline sessions.
1. **Integrating new projects and utilizing DOM debugging** (42:51) — Exploring HTML attributes directly within browser developer panels uncovers precise component behaviors without relying on external plugins.
1. **Handling cyclic dependency support within component trees** (45:03) — Tracking circular dependencies properly resolves mutual component updates without crashing lazy hydration pipelines.

## Related Moments

- [Introducing the Qwik open source web framework](https://www.wearedevelopers.com/videos/215-rethinking-web-application-design-for-fastest-possible-time-to-interactive) (from "Rethinking web application design for fastest possible time to interactive")
- [Modernizing legacy client-rendered components with server-side frameworks](https://www.wearedevelopers.com/videos/1587-web-fragments-incremental-micro-frontends-migration-approach-for-enterprise) (from "Web-Fragments: incremental micro-frontends migration approach for enterprise")
- [Demonstration of Qwik deferred code execution capabilities](https://www.wearedevelopers.com/videos/215-rethinking-web-application-design-for-fastest-possible-time-to-interactive) (from "Rethinking web application design for fastest possible time to interactive")
- [Balancing interactivity and load times with pre-rendering](https://www.wearedevelopers.com/videos/937-sleek-swift-and-sustainable-optimizations-every-web-developer-should-consider) (from "Sleek, Swift, and Sustainable: Optimizations every web developer should consider")
- [Audience Q&A on framework limitations and specific uses](https://www.wearedevelopers.com/videos/456-writing-truly-cross-plattform-applications-using-flutter) (from "Writing truly cross plattform applications using flutter")
- [Optimizing browser performance using modern island architecture](https://www.wearedevelopers.com/videos/872-multiple-ships-to-the-island-micro-frontends-island-architectures) (from "Multiple Ships to the Island - Micro Frontends & Island Architectures")

## Related Articles

- [The Best JavaScript Framework to Learn](https://www.wearedevelopers.com/magazine/229-the-best-javascript-framework-to-learn)
- [Dev Digest 139 - Soft and hard queries](https://www.wearedevelopers.com/magazine/487-dev-digest-139-soft-and-hard-queries)
- [Dev Digest 133 - Back to Front](https://www.wearedevelopers.com/magazine/474-dev-digest-133-back-to-front)
- [Native Web Apps: Are We There Yet?](https://www.wearedevelopers.com/magazine/83-native-web-apps-are-we-there-yet)

## Related Jobs

- [Frontend Engineer](https://www.wearedevelopers.com/jobs/ext/2731832-frontend-engineer) at **Almedia**
- [Senior Software Engineer, Angular](https://www.wearedevelopers.com/jobs/ext/2796428-senior-software-engineer-angular) at **Bitpanda**
- [Founding Engineer (Front End)](https://www.wearedevelopers.com/jobs/48423-founding-engineer-front-end) at **Momentic**
- [Software Engineer, Fullstack](https://www.wearedevelopers.com/jobs/48415-software-engineer-fullstack) at **Sciforium**
- [Senior Software Engineer, React (Investing & Trading)](https://www.wearedevelopers.com/jobs/ext/1937625-senior-software-engineer-react-investing-trading) at **Bitpanda**
- [Senior Product Engineer](https://www.wearedevelopers.com/jobs/48544-senior-product-engineer) at **Blacksmith Software**