We are building a site in AEM, the site will have both the satanic and dynamic content. Dynamic content resides in external content management system and can be accessed via REST APIS. The approach we took so far is to create custom components to get the content from external source. So, in our architecture, we will be having a page, that will have multiple custom components, which will then call REST API during rendering time. Is this approach correct? Is there any way to combine those multiple rest calls into one?
It all depends on what kind of request are you are making. How much content you are recieving from RestApi calls.
Here are some points you might want to take in consideration.
Try not to make too many ajax call for calling the restApi. It might affect the performance of the page.
Try calling rest api at server level servlet, OSGiservices scheduler etc. It is easy to handle the data here as compared to JS objects.
See if you can cache the results or store the results on jcr nodes and later you can retrieve the data from nodes for your dynamic component. If its feasible for you. You can write schedulers or custom workflow which will keep updating the nodes at regular intervals. Again its all depends on your requirement.
As Varun already outlied, there are multiple factors to consider, which will influence your overall architecture.
If your other CMS is also accessible from the audience, it's possible that the visitors fetches data directly from that CMS; in that case some custom JS is sufficient to request the correct HTML snippets at the right locations and inject it into the right spot on the page.
If that is not possible, you can try to merge the final page at the dispatcher level using SSI. AEM then renders SSI statements into these components and the dispatcher/httpd/CDN performs the calls to the other CMS and merges their result into the right spots of the page.
If that does not work as well and you need that AEM delivers the full page completely rendered, you can fetch (and potentially cache in memory) these snippets from the other systems in real-time and embedd them. Make sure that you can cache the resulting pages on the dispatcher, otherwise this approach is most likely to get a bottleneck of the architecture.
Another option in that case is that you import the snippets from the other CMS into AEM and store it inside the repo. In my opinion that's the worst approach, as you will deal with all kind of issues (unnecessary writes, invalidation and staleness checks, ...).
All approaches have their unique pro's and con's, and it's best if you evaluate all your usecases against the choosen approach.