Next.js Discord

Discord Forum

Server Action + Server Component Re-Render

Unanswered
Golden northern bumble bee posted this in #help-forum
Open in Discord
Avatar
Golden northern bumble beeOP
Noticing some weird behavior for my header auth server component when signing out.

In the attached video you see that if I do not navigate while a sign out is in progress, all works fine. However, if I begin a sign out and navigate immediately after, you see that the sign out does complete, but the server component is not re-rendered properly.

Any ideas what could be causing this or how to fix it? Thanks!
Image

40 Replies

Avatar
Golden northern bumble beeOP
Claude Ai told me this, will try suggested solutions asap, but not sure the reasoning is correct.
Image
Image
Image
I couldn’t find a mention in the docs of next automatically re-validating the page segment that the server action was called on. Is this true?
Avatar
Golden northern bumble beeOP
Update - revalidatePath does not work. Other two suggestions (from Ai) sound like hacks and this has to have some sort of standard solution, right!?
Avatar
Northeast Congo Lion
You are using the redirect function from next/navigation right? And could you also show an example of how your server actions looks like
Avatar
Golden northern bumble beeOP
Redirect is not used. Users should be able to sign out wherever they want and not have the url be changed. My app allows people to be logged in or out with minor differences in the Ui, which would also need to be updated but was simply focusing on my header for now.
My server action for signing out simply deletes a db session and session cookie.
Avatar
Northeast Congo Lion
What should be the behaviour of the header when the user does a sign out action?
Avatar
Golden northern bumble beeOP
The first part of the video I sent. Sign out button shows pending state while action is running, and switches to the sign in button once fully signed out and completed.
Avatar
Northeast Congo Lion
Ohhh, got it. How is the state managed for the username in the nav? Is it context or something?
Avatar
Golden northern bumble beeOP
Just the server component, it fetches the user and session and if logged in, will display the username and the sign out button client component which handles the sign out server action and pending state.
Avatar
Northeast Congo Lion
Did you try revalidatePath with layout as the second argument?
Avatar
Golden northern bumble beeOP
Yep, did not work
Avatar
American black bear
I usually call router.refresh() in my signOut() function or redirect on server components so the state revalidates properly.

For example 

"use client"
import { signOut } from "auth"
import { router } from "next/navigation"

export default function SignOutButton() {
  const [loading, setLoading] = useState(false)
  const router = useRouter()

  async function handleSignOut() {
    setLoading(true)
    
    await signOut()
     
    router.push("/")
    router.refresh()
    setLoading(false)
  }

  ... your button component
}
@Golden northern bumble bee
Avatar
Golden northern bumble beeOP
Does set loading actually update after router.refresh?
Avatar
American black bear
yes
Avatar
Golden northern bumble beeOP
Oh I would have thought there was a gap, between the refresh and loading state
I’ll give this a try, it seems to be the only good solution honestly.
Avatar
American black bear
it does not if you use the window.location api, but using the next.js client navigation it works*
Avatar
Golden northern bumble beeOP
Do you know why it works for my sign in by any chance? I do a redirect in my server action for signing in, but no router.refresh. Yet the server component re-renders
(Not router.refresh, just this problem in general)
Avatar
American black bear
what are you using for auth?
Avatar
Golden northern bumble beeOP
Rolled my own following Lucia guide
Db sessions
So signing in adds session row, sets cookie, redirects
Header component re-renders
But signing out deletes session db, and cookie but no re-render if you navigate away immediately.
It does work if you don’t navigate though, so quite strange
Not sure what’s triggering the re-render, and if server actions are doing any automatic revalidations due to cookies changing or something?
Avatar
American black bear
you are also using redirect in your signOut function right?
Avatar
Golden northern bumble beeOP
No, redirect should not happen for my sign outs
Avatar
American black bear
that is probably what is updating the state
Avatar
Golden northern bumble beeOP
Stay on same page (my site can be used logged in or out)
That would make sense, since the auth header is not in the sign in layout, the redirect rerenders the whole page
But when signing out, layout is same but just auth component needs to change to show sign in button again
So I think that’s why router.refresh is only solution here
RevalidatePath doesn’t do it right away, only thing to update Ui instantly seems to be the router.refresh
I can’t help but think I’m missing something lol
Avatar
Golden northern bumble beeOP
bump