AEM 6.5 & Server Side Rendering

[stevec64674276]

Hello, 

I'm seeking some advice. 

We run AEM 6.5 on premise. The static pages of our website are built using typical AEM development practices i.e. components and templates, following Adobe recommended practices. 

The eCommerce section of our website is build using ReactJS which is hosted on top of AEM, it is not tightly integrated as far as I know. For example if I require a copy change, this needs a code release, I cannot do this via AEM.

The performance of this application is very bad, its failing all the Core Web Vital metrics. 

I'm trying to explore service side rendering options, which I think might help, but what capability does AEM 6.5 have for SSR?

Regards,

Steve

[EstebanBustamante · Accepted solution]

Hi @stevec64674276 

A hybrid headless approach, reached through the SPA Editor, can provide you with SSR functionality. You can learn more about the integration of headless and SPA at this link: https://experienceleague.adobe.com/docs/experience-manager-cloud-service/content/implementing/develo...

Generally speaking, you can achieve SSR via Adobe I/O (which is Adobe's recommendation), or you can simply subscribe to another vendor/provider, such as AWS (Amplify), Vercel, etc. Here is an excellent article that explains in depth what I am mentioning: https://www.albinsblog.com/2021/11/single-page-applicationspa-design-patterns-in-aem.html

Hope this helps

[Raja_Reddy]

Hi @stevec64674276 

Please refer below urls:

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/server-side-rendering-usin...
https://blogs.perficient.com/2021/08/11/server-side-rendering-using-adobe-io/

https://experienceleague.adobe.com/docs/experience-manager-cloud-service/content/implementing/develo... 

This might give you some insights. however, there are a few options you can explore to implement SSR in your AEM application:

1. Use a third-party rendering service: You can use a third-party rendering service like Prerender.io or Rendertron to generate static HTML versions of your ReactJS components. These services can be integrated with AEM to serve pre-rendered HTML to improve performance.

2. Implement your own SSR solution: You can build your own server-side rendering solution by setting up a separate server or using a serverless architecture. This would involve rendering ReactJS components on the server and sending the pre-rendered HTML to the client.

3. Consider using AEM as a headless CMS: Instead of hosting the ReactJS application on top of AEM, you can decouple the frontend and backend. AEM can be used as a headless CMS, providing content via APIs, and the ReactJS application can be hosted separately, allowing for more flexibility in implementing SSR.