React动态文档部分Hydration方案咨询：Markdown扩展交互需求

一、核心方案：React Portal + 标记式Hydration #

• 静态HTML原样交付：文档内容直接输出为静态HTML，仅在需要交互的位置插入特殊标记，比如<div data-react-component="Counter" data-props='{"initialValue": 0}'></div>，无需将整个文档纳入React组件树。
• Hydration阶段精准挂载：客户端启动时，遍历所有带data-react-component属性的元素，通过React Portal将对应组件挂载到这些标记节点上。Portal天然支持跨层级嵌套，彻底解决交互组件在任意层级的嵌套问题，不会破坏原有HTML结构。
• 全局状态管理：直接使用React Context API、Redux或Zustand这类全局状态库——你可以在客户端创建一个隐藏的React根实例，所有Portal组件都挂靠到这个根上，自然共享全局状态，完全不受Islands架构的隔离限制。

二、避免内容重复存储的优化 #

• 服务端生成标记：解析Markdown扩展方言时，直接将交互元素转换为带标记的HTML，同时把组件所需props序列化到data-props属性中，无需额外存储JSON版本。
• 客户端复用静态内容：若某些静态内容需与交互组件联动，可通过DOM API直接读取静态HTML内容，无需从JSON重新渲染。

三、思路修正点 #

• 放弃Islands架构的隔离思路：Islands的核心是组件隔离，但你需要全局状态，改用Portal+共享根实例的方式，既能保留静态HTML的交付效率，又能实现全局状态共享。
• 不要将静态HTML包裹进React组件：这会增加SSR开销，完全违背“原样交付静态内容”的初衷，Portal方案是最直接的替代。

内容的提问来源于stack exchange，提问作者Florian Käferböck