nextjs中的getServerSideProps从未调用

webghufk 于 2023-04-30 发布在其他

关注(0)|答案(1)|浏览(243)

这是我的准则。我使用prisma从postgreSQL数据库中获取数据。问题是getServerSideProps永远不会被调用。日志消息甚至没有打印在控制台中。文件位于app文件夹中

*page.tsx*

import Header from "./HomePageComponents/Header/Header";
import RestaurantCards from "./HomePageComponents/RestaurantCards/RestaurantCards";
import { PrismaClient } from "@prisma/client";
import { NextPage } from "next";

export const getServerSideProps = async () => {
  const prisma = new PrismaClient();
  const restaurants = await prisma.restaurant.findMany();
  console.log("Logging: ", restaurants);
  return { props: { restaurants } };
};

const Home: NextPage<any> = (props) => {
  return (
    <>
      <Header />
      <RestaurantCards />
    </>
  );
};

export default Home;

编辑1：可能的答案是，在应用程序路由器中，我们不能使用getServerSideProps and other traditional for nextjs fetching methods。相反，我们必须将组件转换为异步组件，并在组件内部获取数据。将在服务器端渲染期间进行提取。在将类型分配给功能组件时，可能会出现名为Async Server Component TypeScript Error的问题。

next.js

来源：https://stackoverflow.com/questions/76131160/getserversideprops-from-nextjs-is-never-invoked

1条答案

按热度按时间

nzkunb0c1#

因为你有page.tsx，你很可能在next-13应用程序目录中，我们不再有next。js服务器端函数。
以前，下一个。js用来检查页面上是否有getServerSideProps，如果有，下一个。js用于在服务器上执行此功能并将内容发送到浏览器。在app目录中，我们完全在服务器上。
在你的实现中，你仍然可以将函数命名为getServerSideProps，但是你需要在组件内部手动调用它。

const getServerSideProps = async () => {
  const prisma = new PrismaClient();
  const restaurants = await prisma.restaurant.findMany();
  return restaurants;
};

然后在组件内部

// I defined the component as async so that I could await the getServerSideProps
const Home: NextPage<any> =async  (props) => {
  const restaurants=await getServerSideProps()
  return (
    <>
      <Header />
      // you probably need to pass the restaurants to this component
      <RestaurantCards restaurants={restaurants} />
    </>
  );
};

赞(0）回复(0）举报 2023-04-30

我来回答

nextjs中的getServerSideProps从未调用

1条答案

相关问题

热门标签

最新问答