Next.js中getStaticProps无法获取数据但getServerSideProps正常

两者核心执行逻辑差异 #

• getServerSideProps：每次收到页面请求时，都会在服务端实时执行拉取数据，只要请求时后端服务正常就能拿到返回值，这也是你当前代码能正常运行的原因。
• getStaticProps：默认仅在**项目构建阶段（执行next build时）**在Node.js环境执行一次，生产环境启动后会直接复用构建时生成的静态页面数据，不会每次请求都重新拉取；开发模式（next dev）下也仅在页面文件首次编译、或你修改页面代码触发重编译时才会执行，手动刷新页面不会重新触发该方法。

你当前场景的常见故障点 #

1. 构建/重编译时后端服务未启动
   你请求的接口地址是http://localhost:5000/api/events，如果执行next build、或开发模式下触发getStaticProps重编译的时候，本地5000端口的后端服务没有正常运行，请求会直接失败。而getServerSideProps是你访问页面时才执行，只要你打开页面的时候后端开着就能正常请求，两者触发时机的差异很容易导致这个问题。

2. 日志查看位置错误
   getStaticProps全程在服务端运行，所有console.log输出、报错信息只会打印在你运行next dev/next start的终端面板里，不会出现在浏览器的开发者工具控制台，很多人误去浏览器端看日志，会误以为方法没执行、没拿到数据。

3. 开发模式下未触发重编译
   开发环境中把getServerSideProps替换为getStaticProps后，如果你只是保存文件但没有触发页面重新编译，或者编译时后端接口临时不可用，就会拿到空数据/报错，此时普通刷新页面不会重新执行getStaticProps，你可以手动修改下页面组件的代码触发重编译，再看终端日志确认执行情况。

可直接验证的正确写法 #

替换时请保证导出语法正确，加上错误捕获方便定位问题：

export const getStaticProps = async () => {
  try {
    const res = await fetch(`http://localhost:5000/api/events`)
    // 主动捕获HTTP错误状态，fetch默认只有网络错误才会抛错
    if (!res.ok) {
      throw new Error(`接口请求异常，状态码：${res.status}`)
    }
    const data = await res.json()
    console.log('getStaticProps获取到的数据：', data)

    return {
      props: { events: data },
      // 如需生产环境定期更新静态数据，可开启增量静态再生，单位为秒
      // revalidate: 60
    }
  } catch (err) {
    console.error('getStaticProps执行失败：', err)
    return {
      props: { events: [] }
    }
  }
}

const EventList = ({ events }) => {
  console.log('组件接收到的props：', events)
  return (
    <div>
      <h3>List</h3>
    </div>
  )
}

export default EventList

快速排查步骤 #

• 先单独调用http://localhost:5000/api/events确认接口本身可正常返回数据
• 观察运行Next.js的终端面板，查看getStaticProps执行时的日志与报错信息
• 开发环境测试时，修改组件内的任意代码触发重编译，确认编译时后端服务处于运行状态
• 生产环境测试时，必须先启动5000端口的后端服务，再执行next build，否则构建阶段就会请求失败

注意：不要在组件内部手动调用getStaticProps/getServerSideProps，这两个方法由Next.js框架在服务端自动调度，手动在组件内调用会在浏览器环境执行，此时localhost指向访问者的本地设备，必然请求失败。

内容的提问来源于stack exchange，提问作者Md.Shakil Shaikh