Context in Server Components
Answered
yolocat posted this in #help-forum
yolocatOP
Hi! I'm building an app in Next.js v14 using server components. I get the user's account in a
layout.tsx (server component), and I don't want to pass it down the massive chain of components that will make use of the account. With client components, I could create a context and call useContext(AccountContext) to get the account without having to pass down the account as a prop. How could I achieve this in server components? It is of course possible by passing down as a prop, but I'm looking for a solution that can be scaled better. Thanks!Answered by B33fb0n3
you can fetch the data more than once and put it inside a react cache. Like that your DB receives only 1 request and you get the correct data where you need it
5 Replies
@yolocat Hi! I'm building an app in Next.js v14 using server components. I get the user's account in a `layout.tsx` (server component), and I don't want to pass it down the massive chain of components that will make use of the account. With client components, I could create a context and call `useContext(AccountContext)` to get the account without having to pass down the account as a prop. How could I achieve this in server components? It is of course possible by passing down as a prop, but I'm looking for a solution that can be scaled better. Thanks!
you can fetch the data more than once and put it inside a react cache. Like that your DB receives only 1 request and you get the correct data where you need it
Answer
yolocatOP
doesn't that create unnecessary overhead? and I'm not using
fetch, I query the database directly with @vercel/postgres on the server componentyolocatOP
figured it out, thanks for pushing me in the right direction :)
doesn't that create unnecessary overhead?no
happy to help