I've encountered an issue with my code where I am using prisma to fetch data from my postgreSQL database. The problem lies in the fact that the function getServerSideProps is not being called at all. Even the log message is not being displayed in the console. This file can be found in the app folder.
*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;
Edit 1:
One possible explanation could be that in the app router, we are unable to utilize getServerSideProps and other traditional fetching methods for Next.js. Instead, we must convert our components into asynchronous components and perform data fetching within the components. This fetching will take place during server-side rendering. There may be a challenge with an error known as Async Server Component TypeScript Error when assigning types to your functional component.