在 next.js 新的 app router 中，`getserversideprops` 已被弃用，应直接在服务端组件中使用 `async/await` 执行数据获取，无需特殊导出函数。
Next.js 13+ 引入的 App Router（基于 React Server Components）彻底重构了数据获取机制。与旧版 Pages Router 中必须通过 getServerSideProps、getStaticProps 等约定式函数导出数据不同，App Router 鼓励在组件内部直接执行异步操作——只要组件是服务端组件（默认行为，且未显式标记 'use client'），其顶层 async function 就会在服务端渲染时自动等待 Promise 解析。
✅ 正确做法：将数据获取逻辑内联至页面组件中
以下是在 app/blah/page.tsx 中获取 GitHub 仓库数据的标准写法：
type Repo = {
name: string;
stargazers_count: number;
};
async function fetchRepo(): Promise<Repo> {
const res = await fetch('https://api.github.com/repos/vercel/next.js', {
// 推荐显式设置 cache 策略（可选）
cache: 'no-store', // 确保每次请求都是新鲜的（SSR 行为）
// 或使用 'force-cache'（默认，可能触发 ISR 缓存）
});
if (!res.ok) {
throw new Error(`HTTP error! status: ${res.status}`);
}
return res.json();
}
export default async function Page() {
try {
const repo = await fetchRepo();
return <div>Stargazers: {repo.stargazers_count}</div>;
} catch (error) {
console.error('Failed to fetch repo:', error);
return <div className="text-red-600">⚠️ 数据加载失败，请稍后重试</div>;
}
}? 关键要点说明：
- 无需导出 getServerSideProps：该函数在 App Router 中完全无效，会被忽略；
- 组件必须是 async 函数：Next.js 会自动在服务端执行并等待其返回 JSX；
- fetch 默认启用服务端缓存：建议根据场景显式配置 cache 选项（如 no-store 实现纯 SSR，force-cache 启用全局缓存）；
- 错误处理不可省略：服务端组件中抛出的异常会中断渲染，需用 try/catch 提供降级 UI；
- 类型安全仍可保障：可通过 const repo = await fetchRepo() 的返回类型自动推导，无需 InferGetServerSidePropsType。
⚠️ 注意事项：
- 若组件中引入了客户端交互（如 useState、useEffect），需添加 'use client' 指令，此时不能再执行 await —— 此类逻辑应移至服务端组件中预取数据，再通过 props 传递给客户端组件；
- 不要尝试在客户端组件中 await 获取数据（会触发 React 报错），所有异步数据获取必须发生在服务端组件或服务端 Action 中。
总之，App Router 的设计哲学是“简化抽象、贴近原生”，用标准的 async/await 替代魔法函数，让数据流更直观、可调试性更强。掌握这一范式，是高效使用 Next.js 最新版的关键一步。
