<Suspense /> when navigating via <Link /> not working
Answered
Harlequin Duck posted this in #help-forum
Harlequin DuckOP
In my page i have this server component:
like:
The Browser does not show my
I want to see the normal
Is this not intended like this? Am i doing something wrong?
<Suspense fallback={<Loading />}>
<Table mapPromise={mapPromise} />
</Suspense><Table /> is an async component that takes very long to load. So if i navigate to the page via its url i don't see the <Table /> i see the <Loading /> until <Table /> is ready. But if i navigate via a <Link />like:
<LinkDefault
href={`/abas/articlecompare?old=${oldValue}&new=${newValue}`}
prefetch={false}
>
Open
</LinkDefault>The Browser does not show my
<Loading /> component. It just does nothing, the url does not change until the <Table /> is loaded. Then the url changes and i see the <Table />.I want to see the normal
<Suspense /> fallback value when i navigate to an url via a <Link />.Is this not intended like this? Am i doing something wrong?
Answered by Harlequin Duck
I can't share my current code. If i find time i will do a repro repo.
However i found a solution by adding a key to the suspense https://github.com/vercel/next.js/discussions/50563
However i found a solution by adding a key to the suspense https://github.com/vercel/next.js/discussions/50563
7 Replies
Harlequin DuckOP
This is driving me crazy.
Not even the loading.tsx is showing in this case.
It seems the only solution is to make the page a client component and simply fetch the data while handling the state yourself.
However, this makes server components pretty much useless for pages with dynamic data.
Not even the loading.tsx is showing in this case.
It seems the only solution is to make the page a client component and simply fetch the data while handling the state yourself.
However, this makes server components pretty much useless for pages with dynamic data.
i need to see a reproduction repo
most likely you used suspense wrong
Harlequin DuckOP
It's not just the <Suspense /> tho.
I can remove it and get the same issue.
I have a page. That page server-component has a child, which is an async server-component. This child takes a few minutes to load.
So if i open the url to my page i would next.js expect to show my loading.js instead of the page until my child is loaded.
This works.
But if i navigate to the same page via a <Link /> component it does not work. I don't see the loading.js and the browser is just unresponsive till the page (including the async child) has loaded.
I will maybe try later to come up with a reproduction repo.
I can remove it and get the same issue.
I have a page. That page server-component has a child, which is an async server-component. This child takes a few minutes to load.
So if i open the url to my page i would next.js expect to show my loading.js instead of the page until my child is loaded.
This works.
But if i navigate to the same page via a <Link /> component it does not work. I don't see the loading.js and the browser is just unresponsive till the page (including the async child) has loaded.
I will maybe try later to come up with a reproduction repo.
Yes, make a repro repo
Harlequin DuckOP
I can't share my current code. If i find time i will do a repro repo.
However i found a solution by adding a key to the suspense https://github.com/vercel/next.js/discussions/50563
However i found a solution by adding a key to the suspense https://github.com/vercel/next.js/discussions/50563
Answer
yes, to re-trigger Suspense again you need to add keys