Expand my Community achievements bar.

Guidelines for the Responsible Use of Generative AI in the Experience Cloud Community.
SOLVED

AEM React hybrid approach (Normal AEM + SPA Component use together)

Avatar

Level 1

Hi team,

 

We are planning to implement hybrid approach in our project architecture where we can use both AEM core components and React SPA at same page. Please let us know if we have any dummy git project available which can be used as reference.

Thanks in advance !

 

Best Regards,

Swapnil Desai

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Hi, 

The SPA components will render in the SPA Editor, and the AEM WCM Core component will render in the Page Editor, which are 2 different technologies, that share the same UI, but these are not compatible, you can read more here: 

https://experienceleague.adobe.com/en/docs/experience-manager-65/content/implementing/developing/spa... 

https://medium.com/activate-aem/aem-spa-comparison-of-different-approaches-fd5860fb6530 

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/using-aem-v-s-aem-spa/m-p/... 

 

Just to clarify, A "hybrid" approach in the AEM world refers to the SPA Editor, where you can edit content through a WYSIWYG editor, while still leveraging Content Fragments/Sling Model Exporter to expose data and consume it in an "external" application (such as an app written in React).


Hope this helps



Esteban Bustamante

View solution in original post

3 Replies

Avatar

Correct answer by
Community Advisor

Hi, 

The SPA components will render in the SPA Editor, and the AEM WCM Core component will render in the Page Editor, which are 2 different technologies, that share the same UI, but these are not compatible, you can read more here: 

https://experienceleague.adobe.com/en/docs/experience-manager-65/content/implementing/developing/spa... 

https://medium.com/activate-aem/aem-spa-comparison-of-different-approaches-fd5860fb6530 

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/using-aem-v-s-aem-spa/m-p/... 

 

Just to clarify, A "hybrid" approach in the AEM world refers to the SPA Editor, where you can edit content through a WYSIWYG editor, while still leveraging Content Fragments/Sling Model Exporter to expose data and consume it in an "external" application (such as an app written in React).


Hope this helps



Esteban Bustamante