Hydration issues: plugins, RTD, etc.

[LecrisUT]

Describe the bug

context
Most context is in executablebooks/mystmd#997.

Basically, hydration breakes browser plugins, RTD, etc. which try to inject additional elements in the html document

potential solution

One suggestion from the discussion is to move all content to an element inside the html document and hydrate that element instead of the whole document.

Other consideration is does the hydration work the same in next.js, etc. or is it the same across all react environments? I.e. is it possible to hydrate only elements?

Reproduce the bug

See console in https://mystmd-temp.readthedocs.io/latest/

[rowanc1]

Both remix and next are moving to hydrating the whole document. It does look like there has been progress on this from the react core team, some of which is linked through here:
remix-run/remix#5244 (comment)
That is only ever going to be permissive of head tags/changes though.

ReadTheDocs hosting is very static html focused, and seems to be modifying the HTML on the way through, any changes to the body will cause hydration to fail and rerender when javascript is loaded as the html no longer matches the original server response (i.e. not the one RTD modified). That will remove any unexpected changes, regardless of the framework we use. I suspect a special readthedocs theme might be the way forward (or components), or configuring RTD to not change the HTML.

[LecrisUT]

I suspect a special readthedocs theme might be the way forward (or components), or configuring RTD to not change the HTML.

Btw, the addition there is because I enabled the plugin for that, it can indeed be disabled. As for where to put it, I would say as a component, close to myst-to-react since this is a hydration specific issue where this is needed. Upstream RTD did suggest that we could use readthedocs/sphinx_rtd_theme#1526 to enable getting the metadata from RTD and probably hook it to the flyout

[rowanc1]

Closing this to focus the conversation on this issue:

• React/DOM: hydrated page incompatible with RTD flyout menu mystmd#997