next.js getServerSideProps实现导致不同的props

dw1jzc5e  于 2023-04-20  发布在  其他
关注(0)|答案(1)|浏览(131)

我刚开始使用NextJS,还在学习SSR,我很难理解getServerSideProps()的功能,它说应该取代useState,因为它在后端呈现,但我得到了不同的 prop ,我给它,只返回一些参数属性

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>
  )
}

上面的代码呈现字符串:

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

是什么原因导致的以及如何纠正?谢谢

ivqmmu1c

ivqmmu1c1#

我已经试过你的代码了,它像预期的那样工作。我有:

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只有在运行next devnext start时才能工作,因为需要实际运行的服务器才能执行getServerSideProps

相关问题