getServerSideProps implementation resulting different props

Question

I'm new in using NextJS and still learning about SSR, i had hard time understanding getServerSideProps() functionality, it's says that should replace useState for it be rendered on backend, but i got different props from what i gave to it and returning only some params attributes

export async function getServerSideProps() {
  return {
      props: {
        followNasa: true,
        user: {name:'name1', username:'username1', photoUrl:'https://avatars.githubusercontent.com/u/62820033?v=4'}
      },
  };
}

export default function OverviewPage( props ) {
  return (
    <div className='w-full min-h-screen py-10 px-16 flex flex-col bg-gray-200'>
      <div>
        <p>user: {JSON.stringify(props.user)} & {JSON.stringify(props)}</p>
      </div>
    </div>
  )
}

code above renders string:

user: & {"params":{},"searchParams":{}}

what causes this and how to correct it? Thanks

score 2 · Accepted Answer · answered Apr 20 '23 at 06:31

I've tried your code, and it works as expected. I've got:

user: {"name":"name1","username":"username1","photoUrl":"https://avatars.githubusercontent.com/u/62820033?v=4"} & {"followNasa":true,"user":{"name":"name1","username":"username1","photoUrl":"https://avatars.githubusercontent.com/u/62820033?v=4"}}

You can see it running on codesandbox.io

getServerSideProps will work only when running next dev or next start because it needs an actual running server to be able to execute getServerSideProps.

getServerSideProps implementation resulting different props

1 Answers1