Both the approach which you have mentioned works well. Which one to follow depends on
1. Overall architecture
If you have a proper layered architecture, then it depends on which layer is defined for these API calls.
Secondly, I would decide mainly depending on the abstract level I would like to maintain to the browser. If the APIs are open GET API with the generic data, then I would probably call directly from the browser which would be
a) better performance
b) less calls back to publish instance
However, If the data is sensitive and I would like to protect the endpoint exposure to the browser or if there is any authentication required to call the protected API, then I would redirect them via servlet.
a) In this approach, you may have to do more performance tests on your publish instance to make sure your architecture can withstand that traffic.
Hope this gives you some thought process to your question
We are having huge content to be displayed on pages from making service calls to our micro services.
There is debate on whether to call the services directly from js framework (react or angular) to micro service end point or should the calls be made via osgi bundles(making http connections using apache http client) in AEM.
In many Adobe products like LiveCycle ES to AEM, there is a need to invoke an external service to get data. For example, if you want to get Google Distance Information into your site - you will need to invoke a given Google WS.
In AEM, you can invoke a 3rd party web service using HTTP Java APIs. To use this Java API, you need to code it this way.
THen you can get the result and parse it and display the data in the component's view.