Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

Using AEM SPA and AEM Native (server side) on the same website

Avatar

Level 2

Hi,

 

I have started a project where the client developed a single website using "regular" (server-side) AEM development. They followed all the best practices. However, a migration opportunity presented itself that involves migrating react components from an old legacy CMS (funny enough happens to be AEM 6.2) to the new 6.5. Since we do not want to re-write all of the components in the 6.5 (which are server side) to react spa, is it possible to keep a suite of server-side components and another suite using AEM react SPA?

 

Thanks in advance,

Sam

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Yes you can have both varieties under same content heirarchy

View solution in original post

6 Replies

Avatar

Community Advisor

@SamFlyn I don't think you can achieve this in a single page. What u cab do is create/maintain two different projects under fit, one with traditional aem archetype and another with spa archetype and you can either create pages using spa templates and use react based components or use traditional aem templates to use traditional components.

Avatar

Level 2

Ohh no we didn't want to mix and match components on the same page. Pages that are built using SPA would be just on a template, components using native would be on a "normal" template. But I was wondering if it was ok to have both types of template on the same root site.

Avatar

Correct answer by
Community Advisor

Yes you can have both varieties under same content heirarchy

Avatar

Level 1

This answer is incorrect. I have tried it and both can' live under same content hierarchy. SPA page template doesn't allow normal server side rendered components to work. Please mark this question unanswered

Avatar

Level 1

It is possible, no doubt. As mentioned above, you need to have two separate templates and each page can either be a SPA or a native (you cannot mix components on one page). What was not mentioned is that for each template you would need to create a separate page renderer. So pages create from these templates will have a different resource types.

Avatar

Level 1

Hi @SamFlyn 

Were you able to achieve this? I am looking to do something similar but SPA page template is not working properly in my 'normal' codebase. I created a ui.frontend.react folder in my codebase so now there are 2 folders. ui.frontend which is for normal server side rendering, and ui.frontend.react for client side rendering. But the pages created from SPA page template don't render properly. The react js and css are all getting injected, but page does not render anything, not even the layout container'd dialog properly.

 

Would appreciate if you can let me know if you were able to achieve this