Steps to work with AEM Server Side Rendering with Remote SPA | Community
Skip to main content
K
kalyanchakravarthych
Level 3
May 17, 2024
Solved

Steps to work with AEM Server Side Rendering with Remote SPA

  • May 17, 2024
  • 2 replies
  • 2367 views

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

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 EstebanBustamante

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-headless/how-to/example-apps/next-js

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.

 

2 replies

EstebanBustamante
Community Advisor and Adobe Champion
EstebanBustamanteCommunity Advisor and Adobe ChampionAccepted solution
Community Advisor and Adobe Champion
May 17, 2024

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-headless/how-to/example-apps/next-js

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.

 

Esteban Bustamante
    HrishikeshKagne
    Community Advisor
    HrishikeshKagneCommunity Advisor
    Community Advisor
    May 18, 2024

    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-rendering.html

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

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

    Hrishikesh Kagane
      Terms & ConditionsAccessibility statement

      Loading footer...