fetching dynamic data in layout, not page
Hello hello.
In my nextjs 13 project, my layout.tsx use a client side component (navbar) who also show either the user is connected or not (dynamic).
By definition, the layout does NOT re render.
So impossible to see the up to date data on my navbar. It only shows after a reload of the page.
And no router.refresh() doesnt do the trick.
How would you fix it?
2 Replies
You can pull the navbar into its own component, and make the underlying layout a server component. The use refresh should work after that.
While you can make the layout a client component, from my experience, I would recommend making layouts server components, and client components as the last resort. Ideally, with the features the app router gives, a lot of the advantages are lost by making the layout a client component.
its actually what i did, but it does not work.
I have a sub component in my navbar component, that i made for test purpose and it shows true or false.
I show it in my navbar (which is in my layout) and in my page too.
When i change the boolean state with a switch for example, i see the data updated in real time in my page (its normal) but not in the layout.
Its the same component, called without props.
The fix i found fro now is to use context.