如何在其他网站中集成React/NextJS应用？除iframe外有无其他方案？

iframe是这类集成场景最通用、隔离性最好的实现，除此之外还有以下几种适配不同场景的替代方案：

1. 微前端方案 #

适配场景：主应用和待集成的React/NextJS应用都在你的可控范围内，需要两者之间做高频数据交互

• 基于Module Federation实现：webpack 5原生支持模块联邦能力，NextJS 12及以上版本可通过配置直接开启，你可以将整个NextJS应用或者指定路由、组件打包为可远程加载的模块，主应用在运行时动态拉取模块后直接在自身页面内渲染，无需iframe的沙箱开销
• 基于成熟微前端框架实现：使用qiankun、single-spa等框架，仅需给NextJS应用新增少量生命周期适配代码，主应用注册子应用的资源入口后即可按需挂载渲染，框架会自动处理样式隔离、JS沙箱等问题，适配成本很低

2. Web Component 封装 #

适配场景：需要将React/NextJS应用集成到任意技术栈的主应用，对隔离性有一定要求但不想用iframe

• 你可以将NextJS应用的核心逻辑封装为自定义Web Component，对外暴露统一的props、事件回调等交互接口，编译后输出独立的JS/CSS静态资源
• 主应用无需关注你的技术栈，只需要引入对应的静态资源，在页面中使用你定义的自定义标签即可渲染整个应用，使用成本和普通HTML标签一致
• NextJS生态已有成熟的工具链支持Web Component封装，不需要改动原有业务代码的核心逻辑

3. 私有NPM包发布 #

适配场景：主应用和待集成应用都是React技术栈，你需要对外暴露的是可复用的业务组件/页面而非完整独立应用

• 将NextJS应用的核心业务代码抽离出来，打包为独立的NPM包发布到私有NPM源，主应用直接安装依赖后即可像调用普通第三方组件一样调用你的业务模块
• 该方案性能最优，没有额外的隔离层开销，适合内部技术栈统一的团队使用

4. 服务端片段拼接 #

适配场景：主应用本身也是服务端渲染架构

• 你可以将NextJS应用的页面输出为独立的HTML片段，主应用在服务端渲染自身页面时，直接把NextJS输出的HTML片段嵌入到页面对应位置，前端再对嵌入的组件做hydrate即可，完全没有前端层面的嵌入成本

注：如果你的场景要求应用之间完全隔离、避免样式/JS互相污染，iframe依然是最稳妥的方案，其他替代方案都需要额外处理隔离相关的问题

内容的提问来源于stack exchange，提问作者Agustin Herrera