Next.js新App Router中getServerSideProps无法调用的解决方法

App Router 和 Page Router 用的是完全不同的数据获取逻辑，getServerSideProps 是 Page Router 独有的数据获取方法，App Router 根本不认这个函数，所以你写了也不会被执行，页面自然拿不到任何参数。

在 App Router 中，app/.../page.tsx 里的页面组件默认是服务器组件，你可以直接在组件内部写异步代码来获取服务器端数据，不需要额外的生命周期函数。

修改后的代码示例：

type Repo = {
  name: string
  stargazers_count: number
}

// 直接在页面组件里写异步逻辑
export default async function Page() {
  const res = await fetch('https://api.github.com/repos/vercel/next.js', {
    // 要是想和 getServerSideProps 一样每次请求都拿最新数据（不缓存），就加这个配置
    cache: 'no-store'
  })
  const repo: Repo = await res.json()

  return <div>{repo.stargazers_count}</div>
}

• 服务器组件支持直接用async/await，Next.js会在服务器端跑完这些异步代码，再把渲染好的HTML发给客户端。
• 如果需要缓存数据，可以调整fetch的cache选项，或者给组件加revalidate属性；如果要完全禁用缓存（和getServerSideProps行为一致），就用cache: 'no-store'。
• 要是你需要在客户端组件里拿数据，那得用useEffect或者SWR、React Query这类库，但页面组件本身作为服务器组件时，直接写异步逻辑是最省事的方式。

内容的提问来源于stack exchange，提问作者Sergiy Migdalskiy