React SPA Core Components hyperlinks not working with SSR

[karthik2906]

We are doing a POC to enable Server Side Rendering in a AEM React SPA project. We used the following command to create the project.

mvn -B org.apache.maven.plugins:maven-archetype-plugin:3.2.1:generate -D archetypeGroupId=com.adobe.aem -D archetypeArtifactId=aem-project-archetype -D archetypeVersion=36 -D aemVersion="6.5.17" -D appTitle="AEM React SSR Sample" -D appId="aem-sites-react-spa-ssr" -D groupId="apps.experienceaem.sites" -D frontendModule=react -D includeExamples=n -D includeDispatcherConfig=n -D enableSSR=y

The project was created successfully and the SSR is working with the Express server running. The issue we are facing is that the hyperlinks are not working for any of the out of the box React core components.

For example when we add a button to the page and provide a link to a page in the same project or even any other page the hyperlink is not working. When we inspect the element we can see that the link we put is not getting populated in the href attribute of the tag.

We created a custom component with a hyperlink field and that is working as expected. Only in the React core components provided by Adobe we are facing this issue. We also didn't face issue in any of the SPA projects without SSR.  

We also tried with the archetype version as 41 and got the same issue. Any advice on how we can fix this would be helpful. Thank you!

[Shashi_Mulugu · Accepted solution]

@karthik2906 did you cross checked the properties getting exposed in page.model.json for the component having a href field and what property is being fetched by react component in their .js/code file? mostly it should be something related to property name mismatch.

[karthik2906]

That was it. Thank you!

[Ekhlaque]

@karthik2906  ,Could you please check your react router configuration and make sure that the routing is set up correctly for client-side navigation to work seamlessly with SSR. Ensure that the routes defined in your react application match the server-side rendering configuration.

->In some cases, certain lifecycle methods might not be executed during SSR, which could lead to inconsistencies in rendering,ensure components handle rendering correctly during both client-side and server-side rendering.

->To narrow down the issue ,will request you to temporarily disable SSR in your project to see if the hyperlink issue persists. This can help determine if the problem is specific to SSR or is related to the React components themselves.