17370845950

在 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 {
  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 Stargazers: {repo.stargazers_count};
  } catch (error) {
    console.error('Failed to fetch repo:', error);
    return ⚠️ 数据加载失败，请稍后重试;
  }
}

? 关键要点说明：

• 无需导出 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 最新版的关键一步。