What is the standard way to have a logged in NavBar component?
Unanswered
Rani posted this in #help-forum
RaniOP
Currently I have a NavBar for a simple app I am making. It has the logo in the top left that takes you to the root page, it also has 3 links on the right corner, tasks, login, and signup. Once logged in I want the NavBar to change on the far right to tasks, profile, and sign out.
My current approach: I have created two separate NavBar components each with the ideal content and styling and then I am using a 3rd component that basically checks using a useffect if a user has a jwt token or not and if they do then it displays the authorized NavBar otherwise it displays the default logged out one.
The problem with this approach is that there is noticeable frames when a new page is rendered where the NavBar hasn’t fully loaded yet because it is still checking if a token exists.
Is this the ideal way to solve something like this? I apologize if this is a common question I just can’t seem to find a good solution.
My current approach: I have created two separate NavBar components each with the ideal content and styling and then I am using a 3rd component that basically checks using a useffect if a user has a jwt token or not and if they do then it displays the authorized NavBar otherwise it displays the default logged out one.
The problem with this approach is that there is noticeable frames when a new page is rendered where the NavBar hasn’t fully loaded yet because it is still checking if a token exists.
Is this the ideal way to solve something like this? I apologize if this is a common question I just can’t seem to find a good solution.
4 Replies
Sun bear
I most times make it a server component and fetch the user
export default async function Navbar() {
const user = await getUser()
return (
<div>
{user ? (
// do user stuff
) : (
// do not logged in stuff
)}
</div>
)
}Dutch
If you do this and put the navbar into layout, will the fetch get called on each site request? Or only if the layout changes across requests?
RaniOP
Only if the layout changes I believe