Suspense fallback dosent show on refrshing the page, is there any way to show it both on navigation and also when you manually refresh the screen?
#Suspense fallback dosent show on reload
bronze nova
rugged harborBOT
Hi @bronze nova. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
Based on the knowledge sources provided, it seems that there are some issues with Suspense in Next.js, particularly in production environments. Some users have reported that the Suspense fallback UI does not show up as expected during navigation or on page refresh.
One potential solution suggested by users is to add a unique key to your Suspense tag. This key should change whenever you want the Suspense fallback to show. For example:
<Suspense key={searchParams.q} fallback={<div>Loading...</div>}>
<ServerComponent />
</Suspense>
This code snippet tells React/Next.js that the content has changed in a meaningful way, which should trigger the Suspense fallback.
Another user suggested that the issue might be related to the hosting environment. They reported that disabling buffering in their Nginx configuration on AWS resolved the issue for them.
However, these are user-reported solutions and may not work in all cases. If you're still experiencing issues, it might be helpful to provide more information about your specific setup, such as your hosting environment and the version of Next.js you're using.
Sources:
- Github Issue (closed): Suspense in production is blocking rather than showing fallback UI (https://github.com/vercel/next.js/issues/54667)
- Github Issue (open): Updating search params does not trigger suspense fallback or loading.tsx (https://github.com/vercel/next.js/issues/53543)
- Github Issue (open): router.push() ignores <Suspense /> on target page, waits until data is fully loaded (https://github.com/vercel/next.js/issues/51462)