Traditional AEM + React Components

[VeenaVikraman]

Hi All

We're currently exploring the possibility of combining React components with AEM Traditional Components. Essentially, we would like most of the components to be authored and rendered using AEM Dialog and HTL, but there are certain components that we want to render using React components, similar to how it's done in a Single Page Application (SPA). Has anyone attempted this approach before? Is this achievable? If not, what are the potential challenges?

We have a significant number of dynamically rendered components, and our goal is to enhance performance by moving a considerable portion of the heavy lifting to the front-end modules. 

TIA 

Veena

[aanchal-sikka]

@VeenaVikraman 

I am aware of a project where the combination of traditional + SPA has been used. 

It has also been discussed on https://prashantonkar.medium.com/hybrid-aem-architecture-for-modern-web-frameworks-97536da8e37f

[DPrakashRaj · Accepted solution]

I have work on the project that was implemented in the way @aanchal-sikka shared. Basically on aem component html page you put the dialog values on data- attributes and from the react js you can read the data-attributes and then render it via react dom. 
I do see one challenge in this approach of loading one additional compiled react js library on your page for react to work but I believe you can’t really do much on this.

[VeenaVikraman]

Thanks @aanchal-sikka  and @DPrakashRaj  . This helps. 

[narendragandhi]

Hi @VeenaVikraman 

This presentation from Adapt to 2023 - https://adapt.to/2023/schedule/achieving-agility-and-flexibility-with-aem-hybrid-implementation also talks about hybrid AEM implementation in detail and might be a good resource in your research.

Thanks

Narendra

[EstebanBustamante]

Hi @VeenaVikraman ,

I've seen a couple of projects that fully utilize React to render components. This is just another flavor, with its own set of pros and cons. Typically, the speed and flexibility of using React are the pros. On the other hand, you need to be aware of some well-known React "limitations" that need to be handled properly. For example, performance scores may be lower because it runs fully on the client side. Therefore, aspects such as Cumulative Layout Shift (CLS), First Contentful Paint (FCP), and Largest Contentful Paint (LCP) will be impacted. SEO is another area that will be affected. Usually, if you choose this approach, you end up adding server-side rendering (SSR) to mitigate these potential problems, which can be a little tricky in some cases.

Hope this helps.

[Harwinder-singh]

@VeenaVikraman Yes, the major downside that i have seen with such architectures is that there is a very tight coupling wrt JS and CSS code. You are basically going to load the clientlibs as single monoliths most of the times instead of just loading the code that is actually needed on a specific page.

From an integration perspective, you simply have to pass all the required AEM data to a window object that React can then use to pain the DOM. Another related downside to this as @EstebanBustamante pointed out is low Lighthouse metrics scores with this architecture.