JavaScript Congress • Nov 23, 2021

Interactive server side components

Miško Hevery

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.

Pause
Mute Enter Fullscreen
#1 about 3 min

Page speed challenges in current e-commerce applications

Slow time to interactive scores negatively impact SEO rankings and e-commerce conversions.

#2 about 4 min

Limitations of replayable frameworks and application hydration

Traditional replayable frameworks require downloading and executing large JavaScript bundles before becoming interactive.

#3 about 3 min

Introducing Qwik and resumable component architecture

Qwik embeds application state directly into HTML to eliminate the client-side hydration step.

#4 about 3 min

Visualizing standard hydration and lazy loading constraints

Visible components on a page force traditional frameworks to immediately download and hydrate their underlying code.

#5 about 2 min

Component communication challenges in island architectures

Breaking apps into smaller monoliths complicates inter-component communication across isolated boundaries.

#6 about 3 min

Fine-grained component waking and state rendering

Serialized listener locations in HTML allow specific components to wake up lazily without rendering their parent or children.

#7 about 5 min

Demonstration of lazy JavaScript fetching on interaction

Tiny JavaScript chunks are selectively fetched over the network only when local click events trigger interactivity.

#8 about 8 min

Implementing lazy boundaries with Qwik optimizer hooks

Developers write standard code while an optimizer breaks components into probabilistic chunks based on user interaction patterns.

#9 about 5 min

Tracking component reactivity and DOM serialization elements

Retaining precise component relationships within HTML minimizes application rendering overhead during browser interactions.

#10 about 2 min

Supporting shadow DOM and web components integration

Serializing shadow roots allows web components to dynamically rehydrate after being executed on the server.

#11 about 2 min

SEO impacts of serving resumable HTML components

Shipping pure HTML applications directly boosts search engine performance by avoiding initial JavaScript execution times.

#12 about 2 min

Working with state libraries and web workers

Migrating operations to a web worker with Partytown enables predictive prefetching without blocking the main browser thread.

#13 about 2 min

Evaluating Qwik as a framework replacement option

Moving away from replayable bootstrap methods makes this framework highly effective for complex website environments.

#14 about 2 min

Managing potential HTML bloat from state serialization

Strategically chunking state scripts across DOM sections enables asynchronous loading to mitigate total payload sizes.

#15 about 2 min

Rendering requests through edge computing functions

Delivering dynamic, personalized interactions at the CDN edge prevents server round trips while preserving physical delivery speeds.

#16 about 2 min

Retaining application state for offline PWA architectures

Freeze-drying active web pages into HTML allows users to instantly resume exact digital workflows between offline sessions.

#17 about 3 min

Integrating new projects and utilizing DOM debugging

Exploring HTML attributes directly within browser developer panels uncovers precise component behaviors without relying on external plugins.

#18 about 2 min

Handling cyclic dependency support within component trees

Tracking circular dependencies properly resolves mutual component updates without crashing lazy hydration pipelines.

Matching moments

1:34 min

Introducing the Qwik open source web framework

Misko Hevery · World Congress 2021

3:02 min

Modernizing legacy client-rendered components with server-side frameworks

Igor Minar Igor Minar +1 · World Congress 2025

2:08 min

Demonstration of Qwik deferred code execution capabilities

Misko Hevery · World Congress 2021

4:50 min

Balancing interactivity and load times with pre-rendering

Andreas Taranetz Andreas Taranetz · World Congress 2024

3:06 min

Audience Q&A on framework limitations and specific uses

Simon Auer Simon Auer · World Congress 2022

3:52 min

Optimizing browser performance using modern island architecture

Florian Rappl · LIVE