3 ms·
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 "rend
by rglover 4y ago
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.
Here's the SSR I do:
https://github.com/cheatcode/joystick/blob/development/node/src/ssr/index.js https://github.com/cheatcode/joystick/blob/development/node/...
Here's the mount ("hydration"):
https://github.com/cheatcode/joystick/blob/development/ui/src/mount/index.js 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 https://github.com/cheatcode/joystick
- jstanley 4y agoAre you saying it takes 469ms to attach event handlers? That's well over a billion clock cycles. That doesn't sound efficient.
- rglover 4y agoNo. A quick rough profile: https://imgur.com/a/hVLD5Db https://imgur.com/a/hVLD5Db 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.