Next.js Discord

Discord Forum

<Suspense /> when navigating via <Link /> not working

Answered
Harlequin Duck posted this in #help-forum
Open in Discord
Avatar
Harlequin DuckOP
In my page i have this server component:
        <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
View full answer

7 Replies

Avatar
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.
Avatar
joulev & fuma pray for Schneider
i need to see a reproduction repo
most likely you used suspense wrong
Avatar
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.
Avatar
joulev & fuma pray for Schneider
Yes, make a repro repo
Avatar
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
Answer
Avatar
joulev & fuma pray for Schneider
yes, to re-trigger Suspense again you need to add keys