In my Next.js 14 project, I have a page that utilizes default Server-side Rendering (SSR) to fetch data and pass it to client components.
export default async function Page() {
const magazines = await getMagazines(true);
return (
<Box
sx={{
display: "flex",
flexDirection: "column",
height: "100vh",
}}
>
<ContextProvider>
<Header />
<Content magazines={magazines} />
</ContextProvider>
</Box>
);
}
The getMagazines function also runs on the server and uses Prisma to load magazines from the database.
export async function getMagazines(
includeUnpublished: boolean = false
): Promise<Magazine[] | null> {
const magazines = await prisma.magazine.findMany({
where: includeUnpublished ? {} : { isPublished: true },
orderBy: [
{
year: "desc",
},
{
number: "desc",
},
],
});
return magazines || null;
}
While this setup works well in local development, I've noticed issues in my production environment such as deleted magazines still appearing for hours later.
I suspect that Next.js may be using one of the caching mechanisms outlined in this article, but I haven't been able to identify which one is causing this behavior.