How to render a component through both HTL and React in SPA editor

[santhosh_kumark]

We have a requirement in AEM React SPA application, where we need to render the component for the first time using AEM component HTML, and there on the react should override it and render the react code. It's like a component having both html and react logic. I tried adding html for the component but it's not working in spa editor.

[Pawan-Gupta]

there is a good post to refer - https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/using-general-htl-componen...

[Tanika02]

Hello @santhosh_kumark - 

To combine AEM's server-side rendering capabilities with client-side rendering using React here are the steps you can follow : 

1.Start by creating an AEM component that includes the initial HTML markup for the component. This HTML will be rendered by AEM when the page is initially loaded. You can use AEM's component editor to design and define the initial HTML structure.

2. Create a React component that will be responsible for rendering the dynamic behavior and interactivity of the component. This React component should be designed to replace the initial HTML markup rendered by AEM.

3.  In the AEM component's HTL (HTML Template Language) file, include a placeholder element where the React component will be mounted. This placeholder element can be a `<div>` or any other suitable HTML element.

4. Use JavaScript to initialize React and mount the React component on the placeholder element. This initialization should be done after the AEM component's HTML has been rendered. You can use a JavaScript framework like React or ReactDOM to accomplish this.

Here's an example of how you can achieve this in the AEM component's HTL file:

<!-- AEM component's HTL file -->
<div data-reactroot="${properties.reactRootId}"></div>
<script>
  // Initialize React and mount the component on the placeholder element
  ReactDOM.render(
    <YourReactComponent />,
    document.querySelector('[data-reactroot="${properties.reactRootId}"]')
  );
</script>

In the example above, `${properties.reactRootId}` is a placeholder for the ID of the root element of your React component, which can be passed as a property to the AEM component.

5. By default, the SPA Editor in AEM does not render server-side HTML when editing React components. You need to customize the SPA Editor configuration to allow the AEM component's HTML to be rendered in the SPA Editor.

• Locate the html-spa-react-app project in your AEM project's structure.
• In the html-spa-react-app project, locate the EditConfig folder. If the folder doesn't exist, create it.    
• Inside the EditConfig folder, create a new configuration file with the name cq-editconfig.json. This file will contain the custom configuration for the SPA Editor.
• Open the cq-editconfig.json file and add the following configuration to enable rendering of the AEM component's HTML in the SPA Editor:

{
  "editConfig": {
    "extended": {
      "componentName": {
        "dialogEditable": true
      }
    }
  }
}

•  Replace "componentName" with the name of your AEM component and save.

[santhosh_kumark]

Hi @Tanika02

We are mapping AEM component to react with MapTo() and not using any div id's to render dynamic logic it in react. Here our scenario is different, we need to render the component content in hybrid approach, first time the content of component html file and thereon the react should override the original content.