Next.jsAppRouter数据获取方式解析

怎么入门文章编程？需要学习哪些知识点？这是新手们刚接触编程时常见的问题；下面golang学习网就来给大家整理分享一些知识点，希望能够给初学者一些帮助。本篇文章就来介绍《Next.js App Router 服务端数据获取方法》，涉及到，有需要的可以收藏一下

Next.js 13+ 的 App Router 不再支持 `getServerSideProps`，而是通过原生异步 Server Components 直接在组件内执行服务端逻辑，本文详解迁移方法、正确写法及关键注意事项。

在 Next.js 的新 App Router（即 app/ 目录结构）中，getServerSideProps、getStaticProps 和 getInitialProps 等传统数据获取函数已被完全移除。这是设计上的根本性转变：App Router 基于 React Server Components（RSC），允许你直接在默认导出的 async 页面组件中编写服务端代码，无需特殊钩子或约定函数。

✅ 正确做法：将数据获取逻辑直接写入页面组件内部，并声明组件为 async：

// app/blah/page.tsx
type Repo = {
  name: string;
  stargazers_count: number;
};

export default async function Page() {
  try {
    const res = await fetch('https://api.github.com/repos/vercel/next.js', {
      // 显式标记为服务端请求（避免被客户端重用）
      cache: 'no-store', // 或 'force-cache' / 'default'
      next: { revalidate: 60 }, // App Router 特有：每 60 秒重新验证（仅适用于 fetch + cache: 'force-cache'）
    });

    if (!res.ok) {
      throw new Error(`HTTP ${res.status}: ${res.statusText}`);
    }

    const repo: Repo = await res.json();
    return <div>Stargazers: {repo.stargazers_count}</div>;
  } catch (error) {
    console.error('Failed to fetch repo:', error);
    return <div className="text-red-500">⚠️ 数据加载失败，请稍后重试</div>;
  }
}

? 关键要点说明：

• 组件必须是 async 函数：这是触发服务端渲染（SSR）的唯一方式；React 会自动在服务端执行该组件并序列化结果。
• fetch 默认服务端执行：在 Server Component 中调用的 fetch 不会到达浏览器，且自动继承 Next.js 的缓存与重新验证能力（通过 cache 和 next.revalidate 配置）。
• 无需 InferGetServerSidePropsType：类型推导直接通过 await fetch().then(res => res.json()) 或显式类型断言完成（如 const repo: Repo = await res.json()）。
• 错误处理需在组件内完成：无法依赖外部 HOC 或 getServerSideProps 的统一错误跳转，应使用 try/catch + 友好 UI 提示。
• 禁止在 Client Components 中 fetch（无 use client 标记时）：若组件顶部有 'use client'，则 fetch 将在客户端执行（触发 hydration 后请求），失去 SSR 优势。

⚠️ 注意事项：

• 不要尝试在 app/ 目录下定义 getServerSideProps —— 它会被完全忽略，且无任何警告。
• 若需基于路由参数（如 app/[id]/page.tsx）动态获取数据，可直接解构 params（通过 async function Page({ params }: { params: { id: string } })）。
• 如需在服务端获取数据后传递给 Client Component，须通过 props 显式传入（Client Component 接收的 props 必须可序列化）。

简言之：App Router 的数据获取 = async page component + 内联 fetch + 类型守卫 + 错误边界。拥抱这一范式，即可获得更简洁、更可控、更符合 React 演进方向的服务端渲染体验。

今天关于《Next.jsAppRouter数据获取方式解析》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！