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?
Hi @ayush-anand
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 ?
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.
