I'm struggling to grasp the concept of fetching external data using server-side rendering with the getServerSideProps method. In particular, I am facing difficulties with the search functionality and how to handle the returned data. As someone who is not very experienced in JavaScript, I believe this issue is more related to JavaScript than next.js.
Below is the code snippet where I fetch data inside the getServerSideProps function:
export async function getServerSideProps() {
const url = `https://...`;
const options = {
< header info...> };
const res = await fetch(url, options);
const data = await res.json();
const orders = data.list; **// this is where the problem lies**
return { props: { orders } };
}
And here is how I render the data fetched from getServerSideProps:
const ListOrders = ({ orders }) => {
return (
<div>
{orders.map((o, i) => (
<h3 key={i}>{o.orderId}</h3>
))}
</div>
);
};
This is a sample of the object that is fetched. The most important part for me is the list:
{
"list":[...]
"data1":[]
"data2":{...}
"data3":{...}
}
Any assistance on resolving this issue would be greatly appreciated.