Server Action + revalidateTag causes first call to reset client states
Unanswered
Marsh Sandpiper posted this in #help-forum
Marsh SandpiperOP
I have some animations around certain client state values (two here, one for the blurry image load and one for hearts appearing). When I refresh the page, I expect the whole blur image load to happen along with hearts popping in. This part happens correctly. However, when I call the server action for the first time which includes a revalidateTag, it seems like it's doing a full router refresh which resets all the useState values to the initial value, causing all the animations to fire again. But weirdly enough, any subsequent server action calls don't have this issue and behave exactly as I want which is just the css updating based on the like/disliked state.
Attached a video going through the entire flow.. any ideas on why the first server action call behaves this way?
Attached a video going through the entire flow.. any ideas on why the first server action call behaves this way?
4 Replies
Marsh SandpiperOP
Some additional network logs, not seeing any difference between the 1st server action call vs the other ones. Maybe looking at this, it's not a full router refresh though.
The really only noticeable difference I can see between the 1st server action call and 2nd server action call is the pre-existence of the preload style tag for the newly updated css. Before the first call, it doesn't have a
<link rel="preload" as="style" href="/_next/static/css/app/layout.css?v=SOME_VERSION"> in the head. Any subsequent calls i guess has the previously loaded css file in the head...Marsh SandpiperOP
Ok, I figured out what the issue was after a day of debugging. It was that I had a root level
loading.tsx that was basically marking all components as if they had a hydration mismatch. Hence on the first server action call, it was refreshing the entire ui