Next.js Discord

Discord Forum

Server Action + Server Component Re-Render

Unanswered
Oak apple gall wasp posted this in #help-forum
Open in Discord
Oak apple gall waspOP
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!

40 Replies

Oak apple gall waspOP
Claude Ai told me this, will try suggested solutions asap, but not sure the reasoning is correct.
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?
Oak apple gall waspOP
Update - revalidatePath does not work. Other two suggestions (from Ai) sound like hacks and this has to have some sort of standard solution, right!?
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
@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
Oak apple gall waspOP
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.
Northeast Congo Lion
What should be the behaviour of the header when the user does a sign out action?
@Northeast Congo Lion What should be the behaviour of the header when the user does a sign out action?
Oak apple gall waspOP
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.
Northeast Congo Lion
Ohhh, got it. How is the state managed for the username in the nav? Is it context or something?
Oak apple gall waspOP
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.
Northeast Congo Lion
Did you try revalidatePath with layout as the second argument?
Oak apple gall waspOP
Yep, did not work
Sun 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
}
@Oak apple gall wasp
Oak apple gall waspOP
Does set loading actually update after router.refresh?
Sun bear
yes
Oak apple gall waspOP
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.
Sun bear
it does not if you use the window.location api, but using the next.js client navigation it works*
Oak apple gall waspOP
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)
Sun bear
what are you using for auth?
Oak apple gall waspOP
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?
Sun bear
you are also using redirect in your signOut function right?
Oak apple gall waspOP
No, redirect should not happen for my sign outs
Sun bear
that is probably what is updating the state
Oak apple gall waspOP
Stay on same page (my site can be used logged in or out)
@Sun bear that is probably what is updating the state
Oak apple gall waspOP
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
Oak apple gall waspOP
bump