React best way of fetching data-CodePudding

Im tryng to do a little React App with Riot API which shows you your recent games etc...

I'm using React and NextJS ('m new to NextJS). I'm wondering what'd be the best way of fetching data.

I've an API developed with expressjs which works perfectly.

Now, the API has two basic endpoints:

/:summonerName/puuid: this endpoint returns the puiid of a player based on his summoner name
/:puuid/matches: this endpoint returns a list of matches IDs based on puiid of player
/matches/:matchId: this endpoint returns the game info based on the provided match ID.

So, my first solution was fetching the puiid in the main component. Inside it, a matchList component which has the state of the list (/:puuid/matches) and then a map that array and generate a match component per element and on it fetch (/matches/:matchID). That solution worked but it was all a bit tricky because each component had to awit till the other complete the request and it will load by parts.

Now I'm using NextJS and there is Server Side Rendering which I don't know if it's a good idea for this part or no. And I'm trying to make a server side rendering and in the main component fetch the match array and the match info in server side rendering but it's not working Error: Error serializing .matches[0] returned from getServerSideProps in "/". Reason: object ("[object Promise]") cannot be serialized as JSON. Please only return JSON serializable data types..Here's the code:

export const getServerSideProps: GetServerSideProps = async () => {
  const puuid = 'XXXXX'
  const matchList = await fetch(`http://localhost:8000/${puuid}/matches/`).then((response) => response.json());
    
  const matches = await Promise.all(
    matchList.map(async (matchId: string) => {
      const res = await fetch(`http://localhost:8000/matches/${matchId}/`)
      return await res.json()
    }
  ));
    
  return { props: matches }
    
}

So I need help with which would be the best approach to this problem. And how would you resolve chained request as shown above.

CodePudding user response：

The data fetching technique you want to use depends on your use cases. Fetching from the client side always results in a loading state, but it is faster. However, you can render from the server side without having to wait for a loading state. That is slower. The drawbacks depend on how you intend for your uses to access the data.

Also, I'm not sure why your server side code isn't working. Especially, when you say "it's not working". What isn't working? You need to give more information on that. But check the following:

Make sure you're calling getServerSideProps inside a component that is a page. That is, getServerSideProps should be inside a file within /pages
Try parsing your data before exporting the prop { props: JSON.parse(JSON.stringify(matches)) }. Remember to pass the props to the parent component

CodePudding user response：

you can use axios, it is promise based HTTP client for the browser and node.js. You can find a lot of videos and blogs online on how to use it. You will also find it in their npm package description.