SSR is hard

[xania]

This is just a unstructured dump of my thoughts and experiments on SSR

Design ideas

To support SSR and hydration on client we need to be able to

1. Hibernate Component return value
   • serialize return data to json string.
   • use Query instead of Function to define behavior, if a Function is used in JSX, e.g. as a callback in then throw error / warning, replace by a function that show an error / warning when called
2. JSX targets html DOM type definition, but does not really depend on the actual DOM. This abtraction is required to support rendering to string at the server where the DOM does not exists (naturally).
3. ...

Unsolved problems

Running client javascript in context of Node is hard. Vite does not really help when it comes to debugging. I tried following approaches

• using vite.ssrLoadModule breaks debugging (with URIError). Vite It relies on runtime evaluation of transformed code on the fly but looses source mappig to original source. I was able to debug at least the first level of generated code by providing full path to ssrLoadModule but then dependent import still don't
• using debugger statements resolves to generate code which could help in a way but is mostly a pain during development
• using vite-node is worse. On file change only the underlying vite server is restarted, and it suffers from same debugging issues as vite runner
• statically import page modules route: () => import('./pages/todomvc' so that we can just map the route to some Module instead of ssr loading the module, but then I also have to reinvent the vite runner to be able to load typescript, scss and all other types of files that may exists in you application. This dependency is risky. I though vite-node runner could help here but I failed to use it correctly or it just does not fit with how I want to use it. I will give it a second try.
• ...