Suspense doesn't show fallback on page reload in prod but it works in dev
Unanswered
Arboreal ant posted this in #help-forum
Arboreal antOP
so i have suspense and it works fine if you navigate to that page with a link but if you refresh the fallbback component doesnt show in prod it waits to get all of the data and then shows the component with no suspense, while in a dev build suspense shows on page refresh and when you navigate to the page, how can i fix this?
14 Replies
Chartreux
Hi, I have the completely oposite problem. Hard reload shows the suspense correctly but client navigation triggers the closest loading.tsx, I feel like everytime I start doing something with app router everything behaves differently...
@Chartreux loading.tsx will never show up for refreshing, its mentioned in the docs that its only and only for navigation.
Chartreux
I know this, but in the example the client navigation still triggers the suspense
After all loading.{tsx,jsx} is just a suspense over the whole page
@Arboreal ant im not sure why your suspense isnt running for refreshing.. can you record all the stuff? both dev and prod
@Chartreux After all loading.{tsx,jsx} is just a suspense over the whole page
loading.tsx is suspense... yes. But its diff from react suspense... hence why it wont show on refreshing... why this is a case you can just dig in the source code.
We are assuming ppr fixes this.. if it even is a bug.. but yea suspense will always show.. loading will only show on navigation.
Chartreux
Will dig in the source, thanks for the support 👍
@Chartreux Will dig in the source, thanks for the support 👍
np, tbf loading and suspense.. is goofy atm
i agree on that
we can just accept and move on :D
@Arinji <@643114580855488513> im not sure why your suspense isnt running for refreshing.. can you record all the stuff? both dev and prod
Arboreal antOP
so in this video you can see suspense working in dev mode, in prod nothing happens the page just reloads without the fallback component
Arboreal antOP
oh it somehow works now even tho i didnt change anything
Chartreux
Quick update on the topic for anyone having the same issue. On our dev env's we are using cloudflare tunnels and they buffer the response. We are still looking for workarround but if you use nginx proxy the fix is simple: https://github.com/vercel/ai/issues/215#issuecomment-1605363922