NextJS中getServerSideProps返回Props异常问题排查与修正

问题描述 #

我是NextJS新手，正在学习SSR技术，对getServerSideProps的功能存在困惑。原本认为它可以替代useState实现后端渲染，但实际页面接收到的Props与定义不符，仅返回params和searchParams属性。

代码示例 #

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":{}}

原因分析 #

问题出在NextJS的版本和路由模式差异上：

• NextJS 13及以后默认启用App Router（基于app/目录），而getServerSideProps是Pages Router（基于pages/目录）专属的SSR数据获取方法，在App Router环境下不会被执行。
• 当你在App Router的页面组件中定义getServerSideProps时，框架会直接忽略该函数，页面只能接收到路由自带的params和searchParams，自定义的Props自然无法传递到组件中。

修正方案 #

根据你选择的路由模式，可采用以下两种解决方式：

方式一：切换到Pages Router #

如果要继续使用getServerSideProps，需要将页面文件迁移到pages/目录下（NextJS 13+默认是App Router，只要项目中存在pages/目录，框架会自动启用Pages Router模式）。

迁移完成后，getServerSideProps会正常执行，页面组件能接收到你定义的followNasa和user属性。

方式二：在App Router中使用替代方案 #

如果坚持使用App Router，无需依赖getServerSideProps，直接在Server Component（App Router中组件默认是Server Component）中编写异步数据逻辑即可：

// app/overview/page.js（App Router目录结构）
export default async function OverviewPage() {
  // 直接编写异步数据逻辑，替代getServerSideProps的作用
  const data = {
    followNasa: true,
    user: {name:'name1', username:'username1', photoUrl:'https://avatars.githubusercontent.com/u/62820033?v=4'}
  };

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

这种方式会在服务器端渲染时执行异步逻辑，直接使用获取到的数据，实现和getServerSideProps一致的SSR效果。

内容的提问来源于stack exchange，提问作者Fahmi Fachrizal