Next.js app目录下getServerSideProps未触发问题求助

你的页面位于app文件夹（Next.js App Router体系）中，而getServerSideProps是Pages Router专属的旧版数据获取方法，App Router完全不兼容这类方法，因此它不会被执行，控制台自然看不到日志输出。

App Router的组件默认都是服务端组件，你可以直接将组件改为异步函数，在组件内部直接调用Prisma查询数据，这个过程会在服务端渲染阶段自动执行。

修改后的完整代码示例：

// page.tsx
import Header from "./HomePageComponents/Header/Header";
import RestaurantCards from "./HomePageComponents/RestaurantCards/RestaurantCards";
import { PrismaClient } from "@prisma/client";

// 初始化Prisma实例（建议后续改成全局单例，见下方优化）
const prisma = new PrismaClient();

// 定义餐厅数据类型，解决TypeScript类型报错
type Restaurant = Awaited<ReturnType<typeof prisma.restaurant.findMany>>[0];

// 异步服务端组件，无需再使用NextPage类型
async function Home() {
  // 在组件内部直接获取数据
  const restaurants = await prisma.restaurant.findMany();
  console.log("Logging: ", restaurants);

  return (
    <>
      <Header />
      {/* 将获取到的数据传递给子组件使用 */}
      <RestaurantCards restaurants={restaurants} />
    </>
  );
}

export default Home;

如果遇到异步服务端组件的类型报错，注意以下几点：

• 不再需要使用NextPage类型，App Router的组件不需要该类型定义
• 手动定义数据类型（如上述代码中的Restaurant类型），或直接复用Prisma查询的返回值类型
• 确保tsconfig.json中compilerOptions.target设置为ESNext或更高版本，以支持异步函数组件语法

每次请求新建PrismaClient会造成资源浪费，建议单独创建文件实现单例模式：

// lib/prisma.ts
import { PrismaClient } from "@prisma/client";

const prisma = global.prisma || new PrismaClient();

if (process.env.NODE_ENV !== "production") global.prisma = prisma;

export default prisma;

之后在页面中直接导入使用：import prisma from "@/lib/prisma";

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