Best Practice for Using a Single API Call to Populate Multiple AEM Components

[ayush-804]

I am working on an AEM project where a 3rd-party API returns a large JSON response containing n number of objects. On a single page, I have 4 different components that need to display data derived from specific parts of this JSON response.

To optimize performance, I want to avoid making 4 separate API calls for each component. What should be the best approach to handle this situation?

[Tethich · Accepted solution]

Hi @ayush-804 

The whole idea is to centralize the logic and then broadcast the data to your components.

If you make the call to the 3rd-party API from back-end, then you need to see how you store it somewhere (depending on how best fits your project), and then use Sling models to extract different data from the json and power the 4 different components.

If you make the call to the 3rd-party API from front-end, then you could do the call somewhere in the page head structure, to be early loaded, then keep it in session storage, and have the other components read it from there.

But this is very broadly speaking. Implementing the actually solution need attention to more aspects about which you need to ask yourself:

1. How often do I need to fetch the json ?

2. Do I need to also enhance the returned data ? Cause' in this case you could consider to generate CF for each of the n objects.
3. Do I have a location in AEM where you usually store stuff like that or you can store it in-memory ?

4. For data reliability, do I need to keep previous data fetched and use it in case your current fetch crashes or returns nothing ?

5. Could I manage the data fetch external of AEM, in microservices, and provide different data sets through custom API for each of my components ?

[sarav_prakash]

Better to consider non-AEM solutions when performance is considered. 

Consider using AIO AppBuilder. A microservice will lazy init and cache the 3rd party data. And serves FE. 

1. Create a new project in developer console https://developer.adobe.com/console/
2. Create a runtime action. You may create 4 actions for APIs. Or single action that ll return 4 responses based of query param
3. The action should lazy-init cache. AIO provides aio-state-lib. Upto 1GB data can be cached ootb. This is fatest cache. Alternate to state-lib will be aio-lib-files. 
4. Upon hitting the web-action, the action returns data from its cache. If cache empty, action calls 3rdparty, lazy init cache and then serves. 
5. AIO takes care of scaling, performance etc. 

This is cloud microservice approach. No AEM involved. If you have other cloud platforms, you may write similar Azure Functions, or AWS lambda, or Google Cloud Functions or Cloudflare Workers etc. Just for your above usecase, better to not use AEM and consider cloud microservice.

[daniel-strmecki]

Hi @ayush-804,

Since you asked this question, I assume you are talking about your FE components (their JS code) calling the same AEM API. In case my first assumption is correct, then it also depends on whether your FE components share any state between them or if they are fully independent of each other.

In the 1st case:

• For React/Preact apps: Use a state management library like Redux
• For small, simple apps: Use an in-memory cache

In the 2nd case:

• Use the browser LocalStorage or SessionStorage

I hope this helps,

Daniel