Traditional AEM + React Components | Community
Skip to main content
VeenaVikraman
Community Advisor
VeenaVikramanCommunity Advisor
Community Advisor
June 8, 2024
Solved

Traditional AEM + React Components

  • June 8, 2024
  • 6 replies
  • 2626 views

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

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by DPrakashRaj

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.

6 replies

aanchal-sikka
Community Advisor
aanchal-sikkaCommunity Advisor
Community Advisor
June 8, 2024

@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

 

Aanchal Sikka
    DPrakashRaj
    Community Advisor
    DPrakashRajCommunity AdvisorAccepted solution
    Community Advisor
    June 8, 2024

    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
      Community Advisor
      VeenaVikramanCommunity AdvisorAuthor
      Community Advisor
      June 9, 2024

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

        narendragandhi
        Community Advisor
        narendragandhiCommunity Advisor
        Community Advisor
        June 10, 2024

        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
          Community Advisor and Adobe Champion
          EstebanBustamanteCommunity Advisor and Adobe Champion
          Community Advisor and Adobe Champion
          June 10, 2024

          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.



          Esteban Bustamante
            Harwinder-singh
            Community Advisor
            Harwinder-singhCommunity Advisor
            Community Advisor
            June 10, 2024

            @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.

              Terms & ConditionsAccessibility statement

              Loading footer...