Suspense boundary and caching
Hi guys, I am building an application with nextjs and prisma at the moment. I have come across a problem that I think is related to caching behavior. Thing is, I have a page.tsx that shows all of the listings.
export default function Home({
searchParams,
}: {
searchParams?: {
category?: string;
};
}) {
return (
<main className="flex flex-1 py-10">
<RentForm />
<Container>
<Suspense fallback={<ListingsSkeleton />}>
<ListingsList filters={{ category: searchParams?.category }} />
</Suspense>
</Container>
</main>
);
}
As you can see ListingsList component is indeed wrapped in a suspense boundary with a skeleton fallback. My listings list component uses the "unstable_noStore" from nextjs to prevent caching like so:
export default async function ListingsList({
filters: { category },
}: ListingsListProps) {
unstable_noStore();
const listings = await getAllListings({ category });
return (
<ul className="grid gap-7 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6">
{listings.map((listing) => (
<ListingItem key={listing.id} listing={listing} />
))}
</ul>
);
}
However, it seems like my result is still cached as I can't see neither skeleton loader nor any fallback provided to the suspense. Not even a flicker. I have tried adding unstable_noStore() to the function getAllListings itself but it doesnt solve the problem either. Any help would be greatly appreciated. Have a good evening!0 Replies