The original problem is that the AEM SPA is triggering unnecessary network calls to the root JSON (en.model.json) and the respective page.model.json for every component rendering. This is because the template structure depth is set to 0, which tells the AEM SPA to load all of the child components of a page in one go. This is causing performance issues and preventing the content from rendering correctly.
To solve this problem, you need to extend the core Page model to tweak the logic of URL shortening. This will allow you to control how the URLs are generated and avoid unnecessary network calls.
Here's how to extend the core Page model to solve the problem:
-
Create a custom Page model class. This class should extend the com.adobe.aem.spa.project.core.models.Page class.
-
Override the getRootUrl method in your custom Page model class. This method is responsible for generating the root URL for the page. In your override, you should check if the template structure depth is 0. If it is, you should return the full URL of the page. Otherwise, you should return the root URL as generated by the default getRootUrl method.
-
Inject your custom Page model class into the AEM SPA. This can be done by adding a Sling resource provider for your custom Page model class.
Once you have completed these steps, the AEM SPA will use your custom Page model class to generate the root URLs for pages. This will prevent unnecessary network calls and allow the content to render correctly.
@9944223
public String getRootUrl() {
if (getTemplateStructureDepth() == 0) {
return getPageModel().getFullUrl();
} else {
return super.getRootUrl();
}
}
OR
Have tried the option of "Exclude Root Levels"?
