Next.js app目录下使用getServerSideProps遇props.data未定义问题

核心原因：路由系统API不兼容 #

getServerSideProps 是 Next.js Pages Router（pages/ 目录）专属的服务端数据获取方法，在 App Router（app/ 目录）中完全不被支持——不管是客户端组件还是服务端组件，定义这个方法都不会被Next.js识别执行，自然拿不到数据。

针对App Router的正确数据获取方式 #

1. 服务端组件直接获取数据 #

App Router中默认组件都是服务端组件，无需额外指令，直接在组件内部写异步逻辑获取数据：

// app/page.js （服务端组件，无"use client"）
async function Page() {
  // 直接调用内部API或数据库查询
  const res = await fetch('http://localhost:3000/api/your-data', { cache: 'no-store' });
  // 对应getServerSideProps的实时数据需求，用cache: 'no-store'禁用缓存
  const data = await res.json();

  return <div>{JSON.stringify(data)}</div>;
}

export default Page;

2. 客户端组件的数据获取处理 #

如果是带 "use client" 的客户端组件，不能直接在组件内写服务端数据逻辑，可通过两种方式解决：

• 父级服务端组件传props：让父服务端组件获取数据后，把数据作为props传给客户端组件
• 使用SWR/React Query：在客户端组件内用这些数据获取库做请求，同时支持缓存、重新验证等特性

// app/client-component.js（客户端组件）
'use client';
import useSWR from 'swr';

const fetcher = (url) => fetch(url).then(res => res.json());

export default function ClientComponent() {
  const { data, error } = useSWR('/api/your-data', fetcher, {
    revalidateOnFocus: true // 聚焦页面时重新验证数据
  });

  if (error) return <div>加载失败</div>;
  if (!data) return <div>加载中...</div>;

  return <div>{JSON.stringify(data)}</div>;
}

3. 实时数据需求的替代方案 #

如果需要类似getServerSideProps的「每次请求都重新获取数据」效果：

• 服务端组件：给fetch添加cache: 'no-store'选项，或者配置next: { revalidate: 0 }
• 客户端组件：用SWR/React Query的实时配置，或者手动触发请求

额外排查点 #

• 确认当前项目的路由系统：App Router（app/目录存在）和Pages Router（pages/目录存在）不能混用数据获取API
• 如果是误将Pages Router代码放到App Router中，要么迁移到App Router的写法，要么改回Pages Router的目录结构

内容的提问来源于stack exchange，提问作者Updater XD