Currently, I am faced with a challenge in fetching data from my database on a NextJS page designated as a client page using "use client" as required by the theme I am working with. At the moment, I have a page that fetches data from the database and redirects it to the client page. However, I would like to directly fetch the data on the client page itself. I attempted to achieve this using useEffect but encountered an issue where the database data was only returned during a hot reload and not on the initial page load. I hope my question is clear.
This is the code for my server page to fetch the data:
import prisma from "src/libs/prisma";
import RinderListPage from "./page-client";
const Page = async () => {
let rinder: any = await prisma.rinder.findMany();
return <RinderListPage rinder={rinder}></RinderListPage>;
};
export default Page;
In addition, I have an API Endpoint containing the data since using Prisma on a client page is not feasible. To attempt fetching the data using useEffect:
useEffect(() => {
fetch('/api/rinder/list')
.then((res) => res.json())
.then((data) => {
setData(data)
setLoading(false)
})
}, [])