I have a question about rum/hydrate... it can add functionality to my components that were rendered from the server... so if the component is rendered on the server and then the client hydrates it ... it can override it with the client definition? (the client has {:on-click (code)} for example that would then get loaded?

I'm wondering if I need 1:1 data representation between the server and the client or if the server-side rendered page with data is enough to send over the wire... and then load only updates

how can I include a vanilla js function in my rum code?

😄 thanks nevermind... interop.

Warning: Expected server HTML to contain a matching <div> in <div>.

how can i ensure the client sees the same div, it seems like matching key-fn doesn't do it...

so yeah... not sure how to make sure rum/hydrate finds the correct components. the example in the guide is too minimal for me to understand what i'm doing wrong ;-;

it's the same as mounting the component, only hydrate expect the DOM subelements already present

On the server I am using rum/render-html maybe that is why?

thanks i will take a look...

do serverside and clientside HTML need to be identical? or just the component i am hydrating?

rum/render-html is the way to go, you just have to render the same DOM as the client would

the component has to be identical

I think the issue is where I am mounting it. I think I am mounting to a div that is actually a child component...

rum/render-html spits out html but does not require a div to mount something on

hrm

... despacito

@jkr.sw thanks bruv! "<div id='rhaq'>" (rum/render-html (all-question-page rk-set)) "</div>" (rum/hydrate (all-question-page in-data) (.getElementById js/document "rhaq"))

@sova You can also do (rum/render-html [:div#rhaq (all-question-page rk-set)])