Adding a react component to non SPA AEM website

[Ananthan_Jayagopal]

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.

[Shashi_Mulugu · Accepted solution]

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

[Ananthan_Jayagopal]

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]

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.