NextJS/React 加载远程组件

MDX 扩展了 Markdown，允许在其中直接使用框架组件（如 React 和 Vue）。

MDX 通过解析 Markdown 抽象语法树，在构建时编译组件并嵌入文章。

对于动态生成内容的 CMS 博客，MDX 不适用，因此需要寻找替代方案。

构想通过普通 Markdown 渲染远程组件，使用 React 和 NextJS 框架。

定义新的 DSL 语法以简化远程组件的导入和渲染过程。

远程组件需要与宿主环境的 React 和 ReactDOM 保持一致，确保它们是单例同版本的。

通过将 React 和 ReactDOM 附加到全局对象，确保远程组件可以正常渲染。

实现了一个基础的 React 组件渲染器，支持懒加载远程组件。

远程组件的构建需要使用 iife 或 umd 格式，并确保 React 使用 window.React。

使用 Rollup 构建远程组件，并配置相关插件以支持打包。

远程组件内部使用 TailwindCSS 时，需避免样式污染宿主环境，推荐使用 PostCSS 和 CSS Module。

通过配置 TailwindCSS 和 PostCSS，确保生成的 className 唯一且不影响宿主样式。

示例组件展示了如何使用本文介绍的方法实现可交互组件。