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

[SamFlyn]

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

[Shashi_Mulugu]

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

[SamFlyn]

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.

[Shashi_Mulugu · Accepted solution]

Yes you can have both varieties under same content heirarchy

[DeepankarDh]

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

[SzymonAKtoPyta]

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.

[DeepankarDh]

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