I have a dynamic route [id] for posts
import Post from “./components/post”
import { Suspense } from “react”
export default function page({params}) {
return (
<div className="mt-[80px] container text-white mx-auto">
<Suspense fallback="loading..." key={params.id}>
<Post id={params.id}/>
</Suspense>
</div>
)
}
import prisma from "@/prisma/client"
export default async function Post(props) {
let post = await prisma.art.findUnique({
where: {
id: Number(props.id)
}
})
return (
<div>
{post.id}
</div>
)
}
the first one is the code for [id]/page.js and the second is for [id]/components/post.js
so the problem is that suspense is not working only in this specific route and it worked on the main route, it shows a blank page until the fetch is done and show the result .
idk what im doing wrong i wish someone could explain what’s going on exactly, and thanks in advance 🙂
I suspense fallback expected to show, but only a blank page shows up until the fetch done
New contributor