I am currently facing a challenge in rendering a page that requires data from two different API fetches.
The URL in the address bar appears as: http://localhost:3000/startpage?id=1
Below is the code snippet for the first API fetch:
import { useRouter } from "next/router";
export const getServerSideProps = async (context) => {
const { id } = context.query;
const res = await fetch(`${process.env.BACKEND_URL}/User/${id}`);
const data = await res.json();
// console.log(data);
return {
props: { user: data },
};
};
The second API fetch is structured like this:
export const getServerSideProps2 = async (context) => {
const { id } = context.query;
const res = await fetch(`${process.env.BACKEND_URL}/User/${id}/favorites`);
const data = await res.json();
//console.log(data);
return {
props: { favorites: data },
};
};
As a result, the page I am attempting to render displays the following content:
function StartPage( {user, favorites} ){
return (
<div>
<div className={styles.formGroup}>
<h1>Welcome {user.name}</h1>
</div>
<div>
<h1>These are your favorite movies:</h1>
{favorites.map(favorite => (
<div key={favorite.id}>
<h5>favorite.name</h5>
</div>
))}
</div>
</div>
)
}
I believe there might be a way to combine both API fetches within one function, but I am unsure of the process. Any suggestions or insights on how to achieve this would be greatly appreciated.
Thank you in advance.