能否将React Admin应用拆分为多个根节点部署在不同Next.js页面

拆分 RA 到多个 Next.js 页面的方案不可行 #

React Admin 确实基于单根<Admin>组件架构设计，所有资源注册、权限配置、全局状态（路由、用户会话、接口缓存等）都耦合在该根组件的上下文内。如果强行拆分到不同Next.js页面，各个页面无法获取完整的RA全局上下文，会直接出现资源识别失败、权限校验失效、跨页状态丢失等问题，完全无法正常运行。

多页面各自配置独立<Admin>根节点的方案可行，但存在明显取舍 #

可正常运行的前提 #

• 提前将RA所需的公共配置（数据Provider、权限Provider、通用资源定义等）抽离为独立公共模块，每个页面的<Admin>根节点都引入同一份配置，保证各个副本的基础行为一致
• 无强制跨页同步RA内部状态的需求
  该方案可以享受Next.js的代码分割、按需加载特性，单个页面的bundle体积远小于完整RA单页应用的体积，确实能降低页面加载耗时。

需注意的弊端 #

• 每个<Admin>根节点都会初始化独立的缓存、会话实例，用户跨页切换时会重复触发初始化逻辑、重复请求公共配置接口，产生额外开销
• 无法复用RA内置的跨组件状态同步能力，如果需要共享列表筛选条件、临时操作状态等数据，需要自行实现全局状态管理
• 所有页面的RA依赖版本必须完全一致，否则会出现兼容性问题

更推荐的优化方案 #

如果要兼顾RA的完整能力和Next.js的性能优势，无需拆分到多页面，可在单Next.js页面中使用RA，同时做以下优化：

• 使用next/dynamic按需引入RA的非核心组件，降低首屏bundle体积
• 开启Next.js的bundle分析能力，剔除RA中未使用的模块
• 利用RA内置的懒加载、资源按需注册能力，仅在使用对应资源时加载相关组件

内容的提问来源于stack exchange，提问作者Lukáš Stuchlík