是否可以使用React组件编写AEM Experience Fragments,然后将其馈给无头的前端?

问题描述

简要描述我的目标-

  1. 我有一个约70个React组件的外部React组件库,该库为Web前端(Websphere Commerce网站,该站点通过AJAX调用获取Experience Fragments以获取片段HTML)和一个React Native应用提供了支持。因此,对于Web而言,AEM基本上是内容引擎,可为我们无头的前端服务。
  2. 我想使用这些相同的React组件来提供AEM Experience Fragment的创作经验,而不是必须在AEM中将每个React组件重建为HTL模板-维护一个完全独立的组件库会产生过多的开销HTL模板
  3. 通过遵循官方的Adobe教程here,我看到了如何将React组件映射到Content Fragment创作经验。我的意思是,如果我转到AEM主页>站点>(我的站点)>创建一个新片段,那么我拖入的组件将由React模板提供。我知道了,因为标记与ui.frontend中的BasicComponent.js React模板中的内容匹配,而不与ui.apps中的basic-component.html模板中的内容匹配。
  4. 但是,如果我转到AEM主页>体验片段>创建一个新片段,则相同的BasicComponent组件将从组件文件夹(位于.content.xml旁边)的basic-component.html文件提取,而不是BasicComponent.js

我是AEM的新手,所以希望以上所述是有道理的。我知道我错过了一些非常基本的内容:“体验片段”与“内容片段”有何不同(如果这是正确的术语)。我花了大量时间在Google上搜索信息,但是我发现自己的无知使我很难确定我正在阅读的内容是否是解决问题的线索。

这是我下拉进行试验的仓库:https://github.com/drginm/aem-react-simple-example

任何帮助,不胜感激!我确定我不是唯一一个寻求可解决这种情况的模型的AEM新手。

解决方法

不建议在无头架构中将“体验片段”与ajax html一起使用,应通过sling模型导出器以json格式公开此片段,以减少反应消耗。

要编辑和修改AEM不提供任何API的体验片段,AEM开发人员应提供自定义的REST API进行更改。

我建议使用可通过AEM中的Assets api进行CRUD操作的内容片段。

参考

  1. Difference between experience fragments and content fragments
  2. ASSETS API for the Content Fragments