How do I minimize the total number of API calls generated?

Designing a dashboard type page. In order to summarize contents, there is a row of card outputs (9), each with a repeating group (5-10 items). Each group will pull from a list of common api data. For simplicity, lets say we have 2 boxes and 3 items per output:

  • Stocks: AAPL, CAT, SNOW
  • Tech Sector: AAPL, MSFT, SNOW

Each group has an API call to get price data. However, I have the info to make only 1 call per page load: Create a string of AAPL, CAT, SNOW, MSFT then query the API.
In order to do that, I have to execute those queries before the repeating groups.
Then load & merge those two values into the string I mention above & call the API.

Not sure where to put the logic on the page in order to store those queries first. Custom states?

How do I loop the output of a search into a list? Then I would just need to add the items from the next query ( this page has currently 9 queries like this ) It looks like there is functions for it but the ones I tried wouldn’t evaluate properly.

Also, I can see there are several ways to approach this, such as saving that info into the database before displaying it on the page. After that, how can I cache this page? outside of the price data, nothing on the page will change that often. I would start by caching this output for at least 15 minutes if possible.

Just seeking some general feedback on this part of the process. Thanks!