JavaScript Hydration Is a Workaround, Not a Solution

• miso

  18 2,135 6.0 Haskell

  :ramen: A tasty Haskell front-end framework

• htmx

  565 32,443 9.6 JavaScript

  </> htmx - high power tools for HTML

  

• SurveyJS

  surveyjs.io sponsored

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• joystick

  49 194 9.7 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