User data to server components
Unanswered
sergiocweb posted this in #help-forum
Hello! I have user data in the top of the app (page) and I have to pass to every component. I'm using server components for SEO performance. I do not want to pass the data through the entire component tree. There is something similar to context api for server components? If not, which is the best solution for this? Thank you
3 Replies
Cape lion
i'm interested in this too
@sergiocweb @Cape lion its a pretty intense thing.
So basically you can pass around data in headers.. and access it from anywhere, but this makes the data public and accessible to be edited/deleted/created in the network tab. So its a confirmed thing to just not pass around user data in headers.
https://discord.com/channels/752553802359505017/752647196419031042/1245816419220721785
What you can do instead is make a function and call it anywhere where you need the user data.
For passing server component data to other child server components, what you would do is just call it again in the child component(stuff like fetch requests will be memoized) or just call it once only in the child component.
https://nextjs.org/docs/app/building-your-application/caching#request-memoization
For passing server component data to client components, you can wrap your code in a client context wrapper, this is completely fine.
https://vercel.com/guides/react-context-state-management-nextjs
So basically you can pass around data in headers.. and access it from anywhere, but this makes the data public and accessible to be edited/deleted/created in the network tab. So its a confirmed thing to just not pass around user data in headers.
https://discord.com/channels/752553802359505017/752647196419031042/1245816419220721785
What you can do instead is make a function and call it anywhere where you need the user data.
For passing server component data to other child server components, what you would do is just call it again in the child component(stuff like fetch requests will be memoized) or just call it once only in the child component.
https://nextjs.org/docs/app/building-your-application/caching#request-memoization
For passing server component data to client components, you can wrap your code in a client context wrapper, this is completely fine.
https://vercel.com/guides/react-context-state-management-nextjs
Thank you a lot! I will try these options