I'm totally new to SPAs so I need to find the best approach for loading data in front-end.
I'm using React and Next for the front-end and Laravel for the back-end.
Currently I am making only one request per page to get required data. But the problem is with Laravel resources that won't let me make more than allowed number of resources for a single model (Resource and Resource Collection).
I have an ASP.NET MVC background in my mind which I was able to handle this with different ViewModels but now I'm stuck with Laravels structure.
Let me show you the data I'm returning in my Laravel API in one request for Services page (this page shows services of a specific service provider):
{
"data": {
"name": "",
"desc": "",
"services": [
{
"id": 0,
"name": "",
"category": {
"name": "",
"order": 0
},
"pricing": {
"price": 100,
},
"specs": [
{
"name": "",
"value": "",
"category": {
"id": 1,
"name": "",
},
"defaults": []
},
{
"name": "",
"value": "",
"category": {
"id": 1,
"name": "",
},
"defaults": []
}
]
}
]
}
}
So far so good, but when I need Service in service page, I also need its provider and if I add Provider in ServiceRequest it makes a recursive call and the back-end crashes.
Notice:
I know if I provide my codes we can make something up to make it work, but the real problem is in the way I'm requesting the API not in my codes.
TL;DR
Should I request all required data per page in a single API call or in different calls?
If in different calls, then what happens to performance of the back-end?