Adding a react component to non SPA AEM website | Community
Skip to main content
A
Ananthan_Jayagopal
May 29, 2023
Solved

Adding a react component to non SPA AEM website

  • May 29, 2023
  • 2 replies
  • 1142 views

Hi Team, 

 

We are working on a new website, where we are using AEM as a Cloud service to create the same. The website needs to have the authoring capabilities like in any AEM website.

 

For a specific sign up page, we would require the page to be rendered in React. Using the SPA approach for creating the website, will require the entire website to be created as an SPA. 

 

However, in our case, the web site needs to be an non spa and only certain parts of the website, will needs to be rendered as a react component.

 

Request your help in confirming if there are any ways of achieving the same apart from using react habitat.

 

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 Shashi_Mulugu

@ananthan_jayagopal if your whole website is traditional design and only one or two components in one or two places needs react, you don't need SPA unless your react components need some data to be fetched by some non-aem api or needs commerce sessions mgmt kind of, you can build your components just like any other regular comp which outputs react tags, which can be parsed by your react lib on the page..

 

SPA is best suited if your whole page is react and remote SPA is needed if your react components needed to be backed by Internal non aem driven apps and handles any other sessions related business logic which aem can't provide..

2 replies

Shashi_Mulugu
Community Advisor
Shashi_MuluguCommunity AdvisorAccepted solution
Community Advisor
May 29, 2023

@ananthan_jayagopal if your whole website is traditional design and only one or two components in one or two places needs react, you don't need SPA unless your react components need some data to be fetched by some non-aem api or needs commerce sessions mgmt kind of, you can build your components just like any other regular comp which outputs react tags, which can be parsed by your react lib on the page..

 

SPA is best suited if your whole page is react and remote SPA is needed if your react components needed to be backed by Internal non aem driven apps and handles any other sessions related business logic which aem can't provide..

    A
    Ananthan_JayagopalAuthor
    June 1, 2023

    Hi,

     

    In case if the whole page is a SPA, then we can edit it using the SPA editor in AEM. However, if we want to inject React components for a non-SPA web page, is there any way of doing it?

     

    Can you provide me with options on how to inject react components on non-SPA page.

    ManviSharma
    Adobe Employee
    ManviSharmaAdobe Employee
    Adobe Employee
    May 29, 2023

    Hi,

     

    To incorporate React components into specific parts of your non-SPA AEM website, you can consider the following options:

    1. AEM Editable Templates: Create an AEM template with editable areas where you can include React components using server-side rendering techniques.

    2. AEM Content Fragments: Create Content Fragments for the sections requiring React components and render them within your AEM templates or components.

    These approaches allow you to leverage React functionality while maintaining the non-SPA structure of your AEM website.

      Terms & ConditionsAccessibility statement

      Loading footer...