The overhead is arbitrary if done properly. I did this in Joystick [1] and was shocked at how overcomplicated folks make it.
You're literally just saying "render to static HTML on the server, and on the client, have a way to render a root component to screen and attach event handlers." Without any serious thoughts about optimization (practically none yet), a no-cache refresh/mount takes 227ms to DOMContentLoaded and 696ms to a full load.
The only "magic" is that I embed the hydration logic into the built JS for the current page and it fires automatically on load (no need to add manual hydration code).
Event handlers are attached by queueing them up as I render the component tree and then after the tree is mounted to the DOM, I just run the queue to attach the listeners.
You're literally just saying "render to static HTML on the server, and on the client, have a way to render a root component to screen and attach event handlers." Without any serious thoughts about optimization (practically none yet), a no-cache refresh/mount takes 227ms to DOMContentLoaded and 696ms to a full load.
Here's the SSR I do:
https://github.com/cheatcode/joystick/blob/development/node/...
Here's the mount ("hydration"):
https://github.com/cheatcode/joystick/blob/development/ui/sr...
The only "magic" is that I embed the hydration logic into the built JS for the current page and it fires automatically on load (no need to add manual hydration code).
[1] https://github.com/cheatcode/joystick