How to organize the VUE SSR API?

Question

Vue.js

I can't figure out how best to do it. We have pages (components) that have asyncData, on the server side we wait for requests from all components and after that we give the render to the client. If the page had only a list of products, this would not be a problem, but we have different menus / widgets and so on, which also requires a separate request and it turns out that 10 requests to the api will be sent for each page request? Or I do not understand something and everything is wrong, please explain!
I only have this idea:
- each page is a component that forms an array of the components that are in it and makes one request to the api in which all the components used on the page are transferred, and the api forms a response for all these components at once into one and sends it to the application that sends this one response into a state and immediately fills all the necessary states with data without a bunch of separate requests

Answer 1

Look towards graphql
It hurts at first glance, but when you figure it out, you won't be able to refuse