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

[swapnildesai26]

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

[swapnildesai26]

Is it possible or not ?

@Lokesh_Shivalingaiah @smacdonald2008 @arunpatidar 

[gkalyan]

@swapnildesai26 

Check this article about Hybrid approach  

https://engineering.deptagency.com/achieving-agility-and-flexibility-with-aem-hybrid-implementation

[EstebanBustamante · Accepted solution]

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