Storing user profiles for use in a navbar
Unanswered
Exotic Shorthair posted this in #help-forum
Exotic ShorthairOP
Struggling to understand what the best approach would be here:
Problem:
I want to display user data (profile, some other things) that I get from the database in the nav on every page
Things I've tried:
1) using store / context at the layout level then accessing it in the nav --> realized that on every new page, it'll refetch the profile data anyway since a new layout is rendered
2) that's all, I'm not actually sure where to go from here, it just feels wasteful that I'm doing a DB call for basically static (client) information on every page
Problem:
I want to display user data (profile, some other things) that I get from the database in the nav on every page
Things I've tried:
1) using store / context at the layout level then accessing it in the nav --> realized that on every new page, it'll refetch the profile data anyway since a new layout is rendered
2) that's all, I'm not actually sure where to go from here, it just feels wasteful that I'm doing a DB call for basically static (client) information on every page
4 Replies
As you are using app dir, you can make use of layouts to mean that it doesn't need to rerender for page navigation (but new tags will have full render and this need query again)
@riský As you are using app dir, you can make use of layouts to mean that it doesn't need to rerender for page navigation (but new tags will have full render and this need query again)
Exotic ShorthairOP
that's what I thought would happen, but it doesn't look like that's happening
the RootLayout (and only layout) is:
but in my logs, whenever I go to a new route
e.g.
sometimes I see the navbar and the components inside that require the data both request again
it feels like sporadically, going to a new route makes the whole page reload (which in my head makes sense, since it's compiling the page again), but im hoping there's a way that i could make that not be case? or at the very least some way to only fetch the data once that gets used in both nav and the children (using supabase, so unclear if it’s fetching efficiently)
the RootLayout (and only layout) is:
export default async function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body className="...">
<div className="...">
<Navbar />
<main className="...">
{children}
</main>
</div>
</body>
</html>
)
}but in my logs, whenever I go to a new route
e.g.
/ -> /profile/[username]sometimes I see the navbar and the components inside that require the data both request again
it feels like sporadically, going to a new route makes the whole page reload (which in my head makes sense, since it's compiling the page again), but im hoping there's a way that i could make that not be case? or at the very least some way to only fetch the data once that gets used in both nav and the children (using supabase, so unclear if it’s fetching efficiently)
what's a tag in this context?
@Exotic Shorthair what's a tag in this context?
ahhh i meant "tabs"