DEV Community

Discussion on: Conquering JavaScript Hydration

Collapse
 
ryansolid profile image
Ryan Carniato

Event delegation is the key to not running over the component tree on client side startup. It still additionally requires being able to hoist out all the event handlers in a way they can be registered top level without running any component code which can be complicated since these tend to close over state.

It also requires writing some unique identifier/scope information into the DOM elements themselves at SSR time to know where to find the code and serialized state.

But if you can compile it that way ahead of time, when the browser starts up we only have to add a global delegated event handler for each type of event. No need to run the components. It's only when someone triggers the event that we'd look at the event target and walk up finding the appropriate handlers and scope based on what was written into the HTML that we execute application code.