如何在Next.js新app router中替代getStaticProps？

问题核心 #

你当前的 App Router 代码存在两个关键错误：

1. App Router 没有 getData 这个约定式函数，无法替代 Page Router 的 getStaticProps
2. 页面根组件添加了 'use client'，导致整个组件变为客户端组件，无法在服务器端执行数据预取逻辑（原 getStaticProps 是服务器端执行的）

正确迁移实现 #

将页面拆分为**服务器组件（负责数据预取）和客户端组件（负责 React Query 渲染）**两部分：

1. 服务器组件（app/course-list/page.js）

这部分替代原 getStaticProps 的服务器端数据预取逻辑，默认是 Server Component，无需添加 'use client'：

import { dehydrate, QueryClient } from '@tanstack/react-query';
import CourseListClient from './CourseListClient';
import getODLTopicsApi from './path-to-your-api'; // 替换为你的API路径

export default async function CourseListPage() {
  let errorCode = null;
  const queryClient = new QueryClient({
    defaultOptions: {
      queries: {
        refetchOnWindowFocus: false
      }
    }
  });

  // 预取数据，处理错误
  try {
    await queryClient.fetchQuery(['fetchODLTopics'], () => getODLTopicsApi());
  } catch (error) {
    errorCode = error?.response?.status || 400;
  }

  // 生成 dehydratedState 传递给客户端
  const dehydratedState = dehydrate(queryClient);

  return <CourseListClient dehydratedState={dehydratedState} errorCode={errorCode} />;
}

2. 客户端组件（app/course-list/CourseListClient.js）

负责初始化 React Query 并渲染 UI，需要添加 'use client'：

'use client';

import { Hydrate, QueryClient, QueryClientProvider } from '@tanstack/react-query';
import CourseList from './CourseList';

export default function CourseListClient({ dehydratedState, errorCode }) {
  const queryClient = new QueryClient({
    defaultOptions: {
      queries: {
        refetchOnWindowFocus: false
      }
    }
  });

  // 处理错误状态
  if (errorCode) {
    return <div>加载失败，错误码：{errorCode}</div>;
  }

  return (
    <QueryClientProvider client={queryClient}>
      <Hydrate state={dehydratedState}>
        <CourseList />
      </Hydrate>
    </QueryClientProvider>
  );
}

关键说明 #

• App Router 中默认页面组件是 Server Component，可直接通过 async/await 执行服务器端数据预取，完全替代 getStaticProps 的静态生成逻辑
• React Query 的 QueryClientProvider 和 Hydrate 必须放在客户端组件中，因为这些逻辑需要在浏览器端运行
• 拆分组件后，数据预取在服务器端完成，客户端仅负责复用预取的数据渲染，和原 Page Router 行为一致

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