Should a Sever Action that deletes a cookie & redirects cause multiple page reloads / renders?
Unanswered
Sloth bear posted this in #help-forum
Sloth bearOP
I have a a logout button that calls a server action that clears a session cookie & then redirects to the login page. What I'm noticing is that it seems to reload my top navbar 2 times. 1 time for the cookie delete & 1 time for the redirect. They are being called from the same server action. Is this what is expected? I would think you could / should be able to use something like react used to have "unstable_batchedupdates()" to wrap them in to only trigger a single re-render. As an update, it's not just the Navbar but it seems the entire page reloads 2 times as all the server components rerender.
69 Replies
Do you have your navbar wrapped in memo? Just an idea without setting up a test scenario
@Jboncz Do you have your navbar wrapped in memo? Just an idea without setting up a test scenario
Sloth bearOP
I do not. I also moved the TopNav into each child page and removed it from the layout just to see if there were any differences. It was the same outcome tho.
You should try wrapping it in memo
That doesn’t answer the root of your question , but if you want to stop the rerender wrap it in memo. If that doesn’t solve it then you know for a fact it’s rerendering because some state within it changed twice.
Sloth bearOP
I do want it to render 1 time for sure since there will be a change in layout if logged in / logged out. It's the rendering for each that is what seems to not be right. I can see it rendering if cookies or redirects happen but would seem that if they are in the same action that it should need to only 1 time. I'll try wrapping it in memo just to see what happens later on.
Memo will only rerender it if the underlying data changed.
New react version will automatically memo things but for now it’s gotta be done manually.
Sloth bearOP
No differences using memo
using memo still results in 2 renders on the server it seems
Thats really strange, your top nav doesnt even have dependencies
Ill see if I can get someone that might have a ebtter idea to look at it tomorrow mornig
Sloth bearOP
@Jboncz after trying that I tried adding a footer too with nothing at all in it but a console.count and it renders 2x too
My app def doesn’t do that. Can you provide the code for logout button?
Sloth bearOP
sure
that is adding the footer that has nothing at all in it but a div with "footer" and a console out
Sloth bearOP
it's like next is reloading the page once for the cookie delete (which i get) and once for the redirect (which i get) but can't recognize that they are one right after the other in a server action and doing it only once
i will give that a try
you should await the function when calling server action
Oof I didn’t see that 😂
Sloth bearOP
ha
thx. ill give it a whirl
See someone smarter comes along, I didn’t realize you posted the logout button.
Let me know if that fixes it. Thanks for stepping in @ᴉuɐpɹɐɐ
Sloth bearOP
same issue
Well I need to see the logout action in this case 😂
If you can
Sloth bearOP
for sure. one sec
Technically the fact that he’s awaiting the actual action it would be fine to not be async right @ᴉuɐpɹɐɐ
Just curious for myself
Sloth bearOP
now if i remove either one of the cookie call or redirect it only renders 1 time
Shouldn’t you return in a server action?
I’m just throwing shit at the wall
Yeah I think it’s a case of batching if you hover over redirect and cookies doesn’t the intelligence show you it’s a next response it’s returning?
Going off memory I’m in bed
Sloth bearOP
i'll check
Can you instead instantiate nextresponse as a const and build it then return?
Sloth bearOP
the login action does it as well where i set cookie & redirect
id go for minimum reproducible repository
Actually real quick last thing.
Can you hit the button while monitoring the network tab in debug menu? Are you getting two separate responses?
You’re going to get a lot of responses since you’re redirecting… but you should be able to tell which are server action responses
Sloth bearOP
looked lik it earlier when i look in there but i can do it again and screen shot it
Sloth bearOP
Network before and after
the console.cout()'s to the server for same actions (logging out button)
I just made a repro of the issue, if you change cookies only it renders once. Why would setting cookies cause a rerender
Sloth bearOP
;I would assume a lot of things in data & layout could / would change on cookie delete / change
i slimmed my nav bar out to only have the bare min but the actual nav bar shows hides login/logout buttons depending on a check that actually checks the cookies for a session cookie
im just guessing tho
it's like Next inst batching them together
unstable_batchedupdates
older React you had to wrap multiple setStateVars in that in order to batch them and only render one time ;instead of one render for each
Yeah, im not sure :/
Sloth bearOP
I appreciate all the help and trying
if it was a client side 2x render i wouldn't even think about it but seems well not great being on the server for everone doing it and being newer to Next I'm wondering what else might also cause an extra render on the server
For this use case, if you revert to using an actual endpoint it would solve the issue.
The issue is, booth cookies() and redirect() both return a response Object to the browser. Liek you said its not batching them together, This issue isnt there when you attempt to do other things, I think its just because of the way these actions are built, on a route handler you have access to directly manipulating the nextResponse before you return it. Here its essentially sending two nextResponses.
Okay now bed time lol I got out of bed to try to come up with a solution 😄
I wouldn’t have stopped thinking about it
Sloth bearOP
ha
thx @Jboncz
I'm assuming you mean using rout api?
route api
Let me know if you figure anything out. Yeah route handler is the name of it but yeah
Sloth bearOP
Getting late here as well... give it a go tomorrow
thx again