The most recent version of deku removed the SSR feature as it was buggy and impractical.
It'd be nice to bring back a better version. I have an idea of how this could be done:
Create two new DOMinterpret: one that runs on the server to generate HTML, and one that runs on the client to hydrate the HTML.
The server-side DOMInterpret can be basically the same as the current one. The idea is that we'd use JSDOM to get the innerHTML of the first Deku render. By design, Deku allows for no side effects during the first render, so we can be sure that nothing will be produced other than this HTML. JSDOM is fine for providing server-side polyfills for window and document. That's how the Deku tests currently run, for example.
The only changes on the server render are that elements which are dynamic will have a special data attribute added to them, ie data-deku. That way, they can be queried by a selector on the client side.
On the client, the DOMInterpret would be minimalistic. It would only look up an element in the cache if there were dynamic events on the element and then wire that element up to its listeners.
There are a few corner cases to work out for text elements and fragments, but they'd follow the same general principle.
The most recent version of deku removed the SSR feature as it was buggy and impractical.
It'd be nice to bring back a better version. I have an idea of how this could be done:
DOMinterpret
: one that runs on the server to generate HTML, and one that runs on the client to hydrate the HTML.innerHTML
of the first Deku render. By design, Deku allows for no side effects during the first render, so we can be sure that nothing will be produced other than this HTML. JSDOM is fine for providing server-side polyfills forwindow
anddocument
. That's how the Deku tests currently run, for example.data-deku
. That way, they can be queried by a selector on the client side.DOMInterpret
would be minimalistic. It would only look up an element in the cache if there were dynamic events on the element and then wire that element up to its listeners.There are a few corner cases to work out for text elements and fragments, but they'd follow the same general principle.