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.
