I'm developing an extended dialect of Markdown. I want to make certain elements interactive and am aiming for a SSR/hydration approach using vanilla React. However most of the document is "dumb" HTML, so I would like to serve it as-is and not make it part of the React component tree.
I'm assuming this isn't an exotic use case and there should be best practices for it. But the difficulties I've run into trying various approaches are:
Interactive components can appear at various nesting levels, therefore the HTML snippets between them are not properly nested.
I want to avoid having the contents in the document twice, once as HTML and once as JSON for hydration. (This is a lower priority requirement.)
I heard about Islands architecture, which would work, but makes it harder to have global state which is something I would like to have.
What solution can you recommend? If I'm thinking about the whole situation in a wrong way tell me as well! Thanks a lot!