JavaScript Hydration Is a Workaround, Not a Solution

• miso

  18 2,179 6.4 Haskell

  :ramen: A tasty Haskell front-end framework

• InfluxDB

  www.influxdata.com featured

  Purpose built for real-time analytics at any scale. InfluxDB Platform is powered by columnar analytics, optimized for cost-efficient storage, and built with open data standards.

  

• htmx

  598 37,066 9.7 JavaScript

  </> htmx - high power tools for HTML

  

• joystick

  50 208 10.0 JavaScript

  A full-stack JavaScript framework for building stable, easy-to-maintain apps and websites.

  

  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/...

  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

Suggest a related project