Steps to work with AEM Server Side Rendering with Remote SPA

[kalyanchakravarthych]

Hi,

We have a requirement  AEM Server Side Rendering(SSR) with Remote SPA. Please help me the steps to work with SSR with Remote SPA i didnot find specific with Remote SPA.  I found for Normal SPA with SSR. If not then share me the steps is there a way to customize the same and also share the reference link with all the steps.

Please do the needful with this requirement.

Thanks & Regards,

Kalyan

[EstebanBustamante · Accepted solution]

Hi, 

Since the SPA remote actually just "loads" the SPA app into the SPA editor, the SSR needs to happen in the apps. That being said, there are a couple of ways to achieve SSR. I think the easiest way, because of the examples and boilerplate, is to use NextJS, which already ships with SSR capability. You can find a good example here: https://experienceleague.adobe.com/en/docs/experience-manager-learn/getting-started-with-aem-headles...

You simply use NextJS features that will compile server-side and will be deployed on whatever host platform supports NextJS, like Vercel or Netlify.

Another way to do it is by manually implementing SSR through a NodeJS server (Express) or a Serverless function (Adobe I/O, lambda, etc). You can find more details here: https://www.albinsblog.com/2021/11/single-page-applicationspa-design-patterns-in-aem.html 

Here are good resources to learn more about these options:
https://www.youtube.com/watch?v=rZhMiaPGM_U&ab_channel=adaptTo%28%29Conference-poweredbydiva-e 

https://www.youtube.com/watch?v=TqJuoWZkhfM&ab_channel=AdobeDevelopers

https://www.tothenew.com/blog/aem-with-nextjs-remotespa-a-comprehensive-integration-guide/ 

Hope this helps.

[HrishikeshKa]

Hi @kalyanchakravarthych ,

To work with AEM Server Side Rendering (SSR) with Remote SPA, you can follow these steps:

1. Set up your AEM instance to support SSR. This involves configuring the AEM Dispatcher to allow requests to be forwarded to the AEM SSR server.

2. Create a Remote SPA application that will consume the SSR content from AEM. This application can be built using any modern JavaScript framework, such as React, Angular, or Vue.

3. Configure your Remote SPA application to use the AEM SSR server for rendering content. This involves setting up the appropriate API endpoints and configuring the application to make requests to the AEM SSR server.

4. Create a template in AEM that will be used for SSR. This template should include the necessary markup and components that will be rendered on the server.

5. Create a Sling Model in AEM that will be used to populate the template with content. This Sling Model should retrieve the necessary content from AEM and pass it to the template for rendering.

6. Configure the AEM SSR server to use the template and Sling Model for rendering content. This involves setting up the appropriate API endpoints and configuring the SSR server to use the template and Sling Model.

7. Test the SSR functionality by accessing the Remote SPA application and verifying that the content is being rendered on the server and delivered to the client.

Here are some references that can help you with the implementation:

- AEM Server-Side Rendering documentation: https://experienceleague.adobe.com/docs/experience-manager-65/developing/headless/spas/server-side-r...

- AEM Remote SPA documentation: https://experienceleague.adobe.com/docs/experience-manager-65/developing/headless/spas/remote-spa.ht...

- AEM SSR with React example: https://github.com/adobe/aem-react-spa-project-archetype

- AEM SSR with Angular example: https://github.com/adobe/aem-angular-spa-project-archetype

Note: The exact steps and implementation may vary depending on your specific requirements and the version of AEM you are using.