Streaming and changing search params
Answered
Florida White posted this in #help-forum
Florida WhiteOP
Hello
I implemented data in a table by using the nextjs capabilities of streaming (unawaited promise + use()).
When data is loading I have a suspense that is triggered to give the user a skeleton.
The problem is it only triggers on the first load. When I change the search params (page, page size etc) it doesn't trigger the suspense anymore.
I implemented data in a table by using the nextjs capabilities of streaming (unawaited promise + use()).
When data is loading I have a suspense that is triggered to give the user a skeleton.
The problem is it only triggers on the first load. When I change the search params (page, page size etc) it doesn't trigger the suspense anymore.
Answered by Florida White
RESOLUTION =======>
Using a key on a suspense allows it to know, although the suspense has been resolved and data has arrived initially, there is a new one. I used a search params hash to signal it.
BUT
Navigation in nextjs seems to be pessimistic by default. So the address bar only refreshes when the tree has been updated.
The solution is during the navigation with the Link element, specify "prefetch={false}" so that internally it navigates optimistically and the key updates directly on the suspense.
Using a key on a suspense allows it to know, although the suspense has been resolved and data has arrived initially, there is a new one. I used a search params hash to signal it.
BUT
Navigation in nextjs seems to be pessimistic by default. So the address bar only refreshes when the tree has been updated.
The solution is during the navigation with the Link element, specify "prefetch={false}" so that internally it navigates optimistically and the key updates directly on the suspense.
23 Replies
The problem is it only triggers on the first load. When I change the search params (page, page size etc) it doesn't trigger the suspense anymore.which is good right? the data is already loaded
Florida WhiteOP
Not when you change the tables page for exemple
The promise is reexecuted
But suspense is not triggered
ye but promises resolves in 1ms sooo
Florida WhiteOP
Even if I put a breakpoint server side
It just stays frozen
how do you change the serachparams?
Florida WhiteOP
With a next/linq by just providing the query parameter
no i mean how do you navigate from one search param to another search param
Florida WhiteOP
Yep
i mean how
via redirect() or via router.push, or <Link> or <a>
Florida WhiteOP
<Link query={{ ...previousQueries, page: new page }} />
Something like that
So next routing navigation that triggers correctly my async page flow.
query is not a valid Link prop
Florida WhiteOP
Sorry in the href prop
Like that
But without any pathname
Florida WhiteOP
It is weird, when I click on the next link, the address refresh is only made a the moment where the new data is coming.
So I guess it is normal my keyed suspense on the property doesn't retriggere the suspense.
But I don't know where I'm going wrong.
So I guess it is normal my keyed suspense on the property doesn't retriggere the suspense.
But I don't know where I'm going wrong.
Florida WhiteOP
RESOLUTION =======>
Using a key on a suspense allows it to know, although the suspense has been resolved and data has arrived initially, there is a new one. I used a search params hash to signal it.
BUT
Navigation in nextjs seems to be pessimistic by default. So the address bar only refreshes when the tree has been updated.
The solution is during the navigation with the Link element, specify "prefetch={false}" so that internally it navigates optimistically and the key updates directly on the suspense.
Using a key on a suspense allows it to know, although the suspense has been resolved and data has arrived initially, there is a new one. I used a search params hash to signal it.
BUT
Navigation in nextjs seems to be pessimistic by default. So the address bar only refreshes when the tree has been updated.
The solution is during the navigation with the Link element, specify "prefetch={false}" so that internally it navigates optimistically and the key updates directly on the suspense.
Answer