Next.js Discord

Discord Forum

A template isn't re-rendering if its within the same route group, is this expected behaviour?

Unanswered
Checkered Giant posted this in #help-forum
Open in Discord
Checkered GiantOP
I have a template which renders a header including some navigation etc, the navigation is a client side component that render's the users avatar and display name, but when I log the user out and redirect them to /portal/home using router.push('/portal/home'), the <Header /> component, isn't re-rendered. So can someone please tell me what is the point of a template? If this is intended behaviour, it makes it no difference to a layout. The only way I can get the <Header /> component to re-render is to force refresh the entire page.

100 Replies

Checkered GiantOP
To add to this, I've seen a lot of people recommend hacky workarounds by doing something like:
const router = useRouter();
router.push('/some-path');
router.refresh();

The refresh in this case being logically unnecessary, but realistically necessary to get the intended result.
New Guinea Freshwater Crocodile
In the docs it says that only the children client components will reset their state
Is the Header a client component? If it's, than that's really odd
Checkered GiantOP
Yeah, it's a client component, here I'll show you
Because to me, it seems like it should... otherwise I'm going to have to do a hard redirect, right?
New Guinea Freshwater Crocodile
Yes, since this is a Server Component it gives me the idea that it won't reset
I think the server can't even get the user session since it's on the client
Checkered GiantOP
No it does
If I had refresh, the user is there
the whole issue is when logging out, I destroy the cookie and it redirects me
wait... this might be a supabase issue
now that I think about it
ah no it isnt
New Guinea Freshwater Crocodile
Do you delete the cookie yourself? Or do you use like Supabase's logout method?
Checkered GiantOP
supabase logout method
which deletes the cookie, then I do router.push
the issue is, because I'm redirecting within the same route group
the template isn't updating
if I redirect outside the route group, it all works fine
and I'm just going to double confirm that
New Guinea Freshwater Crocodile
I think you will probably have to move the user out of the template and receive it as a prop
I don't know if it makes sense tbh
@Checkered Giant and I'm just going to double confirm that
Checkered GiantOP
confirmed
@New Guinea Freshwater Crocodile I don't know if it makes sense tbh
Checkered GiantOP
if thats the case, then this may as well be a layout, because as it stands, there's no difference between a layout and a template.
Which is dumb tbh
My solution would be to either perform a hard redirect, or to include the <Header/> component on every Page.tsx
New Guinea Freshwater Crocodile
On the doc it has When a user navigates between routes that share a template, a new instance of the component is mounted, DOM elements are recreated, state is not preserved in Client Components, and effects are re-synchronized.

It makes me think that only the children resets
Checkered GiantOP
That would be my guess too, but as it stands, I have no way of sharing state/logic between multiple pages on my site
unless I do all this client side
which I really dont want to do
New Guinea Freshwater Crocodile
Actually there are some ways to do that, you just need to hydrate the initial state of the store manager you're using
Let met get an example here
Checkered GiantOP
That's the thing, I'm using zustand
New Guinea Freshwater Crocodile
But you can do that with zustand too, but I'm not that experienced with it
Checkered GiantOP
I mean I'm not new to nextjs by all means, I built this site https://gamblo.ag entirely on NextJS 13
using authjs and react context for state
and hydrating state same way on there
New Guinea Freshwater Crocodile
Looks good btw
Checkered GiantOP
ty
this is the thing, I'm not new at all, been devving for 16+ years now lmao
and I know what it's like, usually when people ask questions here, they're usually like "how do I learn html"
I get it
but this stuff is really bizarre, at least to me. Like this just isn't how NextJS should work tbh
hmmm, I wonder if I make a server component if that will work and then reuse that
1 sec trying something
New Guinea Freshwater Crocodile
Hmm, that's interesting
Instead of putting the responsibility on the template, you could just put in on the header and leave it on the layout
Checkered GiantOP
nah didn't work lmao
New Guinea Freshwater Crocodile
lol
I will see if I can repro this in a new project
Checkered GiantOP
Templates should be recalling the top code, it's dumb
I've just confirmed, it doesn't even call the template code, so the returned value of template (the JSX) is probably whats reset.
But that is F* stupid
ngl
This seems to be a known issue too @New Guinea Freshwater Crocodile
there is also a reproduction repo on that issue
New Guinea Freshwater Crocodile
check this out
https://github.com/jolbol1/supatodo
layout + server component header
and it's actually using supabase
and it's using a server action to logout the user too, that may be your problem
maybe it's only logged out on the client side
does it make sense?
Checkered GiantOP
To be honest, I thought about that, and I tried server side logout and it worked exactly the same unless I specifically did a server side redirect, which is the same as performing a hard redirect in the client
so the answer here is to just do window.location.href = '/home' or whatever
instead of router.push
but to be honest... seems dumb that I have to re-render the entire page, when realistically I only want my navbar to update
this is a dumb design decision on NextJS behalf, or it's a bug.
I'm going to go and ahead and give them the benefit of the doubt and say it's a bug.
New Guinea Freshwater Crocodile
I truly believe they're are conscious about this
And I think this is the way they want you to go
Checkered GiantOP
I'm looking at how next-auth/authjs handles it because I used that for that site I sent above, and looking at the source code behind that seems to be a server side redirect too
@New Guinea Freshwater Crocodile And I think this is the way they want you to go
Checkered GiantOP
The issue I'm facing here now though is... I go ahead and I start doing hard redirects because of this bug, then when this bug is actually fixed, I have to remember to come back and switch everything back to router.push - in fact, I'm going to let my IDE handle that, screw it...
@New Guinea Freshwater Crocodile I truly believe they're are conscious about this
Checkered GiantOP
I did try updating to v15 canary build, and believe it or not, I think the bug is somewhat fixed, not entirely, but somewhat...
New Guinea Freshwater Crocodile
But how would it be half fixed 😅
Isn't it like reset or not?
Checkered GiantOP
So when I login right, and redirect to my home page, the header isn't changed on Next 14, but when I do it on Next 15, it is changed and works
but logout on both versions, still doesn't re-render the header
I have no idea why
New Guinea Freshwater Crocodile
lol, very odd
but could you manage to do it with the Header as a server component?
on v14
Checkered GiantOP
nope lol
it's a bug, a weird bug, it has to be, there's no way this is intentional
Checkered GiantOP
I'll provide video to show u what happens on nextjs 15
I forgot to show u the cookie is gone after clicking sign out as expected
now I'll show u what happens in nextjs 14
Checkered GiantOP
As you can see, in nextjs 15, when I am redirected back to home page, the whole header changes, but when I logout, it doesn't refresh (I'm not sure why)
In nextjs 14, when I'm redirected back to the homepage, the header hasn't changed and requires a manual reload, then when I logout, the header still doesn't refresh
So it appears 1 aspect of the bug was fixed in NextJS 15, but the fact the template isn't being re-rendered in the same route group is still a bug.
same code, just different versions of NextJS
>
For anyone who's coming here thinking this issue has been resolved, it still hasn't, any assistance is appreciated.
>
Checkered GiantOP
If anyone wants to know how I solved this, I moved my actions on the server instead of on the client, and I perform a hard redirect. Not ideal as the underlying issue still persists, but it's a viable workaround I'm happy to maintain.