getServerSideProps not working for me as expected

Question

I am unable to figure out why server-side props not working for me in nextjs (v12) I am using getServerSideProps insides pages/details/index.tsx

export const getServerSideProps = (async (context: any) => {
  const name = context.query.name;
  const response = await fetchDetails(name);
  const data = response.data;
  console.log(data); // this line is printing details in server
  return { props: { data } };
});

export default function Page({data}: {data: any) {
    console.log('p', data);
    return <DetailsForm data={data} name="abc"/>
}

While I am able to get props.name as "abc", but data comes as undefined.

Answer 1

I think the issue is with how you are destructing the response on client. I tried to replicate your scenario and I was able to read the data both on server and client. Check this Stackblitz repo.