AEM SPA, omnipresent components and their feed: how to handle it?

[parag_dalal]

Hello, we are facing a bit of a small colossal issue.

We are currently in the middle of implementing a SPA application with Angular and AEM.

Essentially, on the AEM side we have

a) A template with a root of type wcm/foundation/components/responsivegrid and inside it:

1. an experience fragment for the header
2. a responsivegrid node of type wcm/foundation/components/responsivegrid
3. an experience fragment for the footer
4. so basically, something like this:

b) various pages using that template with root/responsivegrid and inside it our components, like so:

To begin with, I have a curiosity.

1) Do you, by accident, know if the structure root/responsivegrid is necessary? It seems to be configured somewhere, but I cannot guess where. Is it fixed in the AEM SPA page architecture?

2) Then, onto the problem we are currently facing.

Our header and footer components are regular components. Their feed arrives in the .model.json JSON of the page, then they are stored in the modelStore in the Angular application, injected into the aem-page component and used to initialize the site tree on the FE side (with the various @inject for the BE configured node properties).

The problems with that are the following:

1) for each page, the data for the header and footer components (which is dynamically generated on the BE and can vary over time, but it is fixed on the FE in a given timeframe) is requested; making the .model.json unnecessarily heavy.

Ideally, we'd like to call and store that data once when the application is started in the user's browser and then never again for as long as the navigation continues or the page is refreshed

2) the header and footer themselves are inside Angular's <router-outlet>, which means that, whenever the user clicks, for example, on one of the header navigation pills, then he navigates to a different page, and both the header and footer are refreshed and, for a second, while the page loads and the .model.json is retrieved, they disappear from screen.

Of course, this type of problem relates to the header and footer, but, in our architecture, could apply to many other components, not necessarily positioned above or below the page content.
Essentially, I've tried to provide a simplified version of the issue; which seems to me the core of the problem we have.

This is quite a big hindrance we are facing, and we are - I assure you - banging our heads to try and find a solution.
Have you guys faced similar issue? Do you have any experiences to share; or useful tips, tricks and links?

Do you know of any working example to basically have structural components appear in certain templates/pages outside of the routing strategy, so that they are not "refreshed" during navigation, and so that their feed is retrieved into the ModelManager once during the whole user session?

As always, thank you very much for your precious input,
Parag Dalal.

[arunpatidar · Accepted solution]

Hi,

I am not an Angular expert but I will try to answer first question related to resposive grid.

Responsive grid is needed for :

1. drag and drop components

2. render json using OOTB model selector.

Just from my experience, adding header and footer using experience fragment is not good if it including their content in page json insteadof that header/footer can be configured as pathfield in page property so you can read this content by making dedicated JSON request. This will also help to not clear the entire portal cache when header/footer is updated.