Next.js Discord

Discord Forum

Previous content is continues to be shown for a moment after refresh

Unanswered
Broad-snouted Caiman posted this in #help-forum
Open in Discord
Broad-snouted CaimanOP
Hi there! I'm using App Router. I have a server page which fetches some data according to searchParams. This data is passed down to a client component. This client component has a button that when clicked should refresh the page, which means, the server page should get data again according to the same searchParams and show the updated content. It works, but for a moment, the previous content is shown, than it gets swapped. I'm currently using router.refresh() after resetting my useStates. What's going on exactly and how can I refresh without showing the previous content?

12 Replies

Broad-snouted CaimanOP
This small video shows what I mean.
Things that I've tried:
1) Put the data fetch on a server component and the client component as this server component child. Put this server component on a Suspense component. It didn't work.
2) Instead of resetting useStates and use router.refresh(), use a server action with revalidatePath and redirect. It doesn't work.
@Broad-snouted Caiman Click to see attachment
Broad-snouted CaimanOP
Sorry for the noise. I've only noticed it now. I didn't remember this was recording my microphone.
Broad-snouted CaimanOP
bump
Broad-snouted CaimanOP
bump
Broad-snouted CaimanOP
bump
Broad-snouted CaimanOP
bump
<Milind ツ />
I think the reason it could be happening is cuz when you are refreshing, the new data takes some time to load and since the old data was already present thru some client state, the client state shows first and the new data gets replaced later.
Switch to using revalidate path or tag instead of router.refresh()
@<Milind ツ /> I think the reason it could be happening is cuz when you are refreshing, the new data takes some time to load and since the old data was already present thru some client state, the client state shows first and the new data gets replaced later.
Broad-snouted CaimanOP
"was already present thru some client state", but I'm basically resetting all my client state, like this:
const reset = () => {
    setExerciseIndex(0)
    setIsExerciseAnswered(false)
    setAnswer(undefined)
    setCorrectlyAnswered(0)
    router.refresh()
}
@<Milind ツ /> Switch to using revalidate path or tag instead of router.refresh()
Broad-snouted CaimanOP
Already tried that (path, not the tag). It didn't work. Thanks for your reply though.