Next.js Discord

Discord Forum

Best Practices for Sharing user Across the App

Answered
Chum salmon posted this in #help-forum
Open in Discord
Chum salmonOP
Currently I'm using createContext and useContext to share user data (user object from database once they are logged in). It works great and all but I have a concern.

Currently I have a UserContext.tsx which uses 'use client' because it needs to use react hooks.

After that I wrap the children of the main layout.tsx with this context. And my concern is that wouldn't it make all the children a client component? And that would be bad for SEO. If it does, what is the method that you use to keep it SEO friendly?
Answered by Shyam Verma
No, it doesn't make children as a client component
View full answer

11 Replies

No, it doesn't make children as a client component
Answer
You can use tanstack/react-query for better implementation and easy to use
It have many functions which optimized our app like fetching data cache it. Invalidate data at any time when user makes changes
Chum salmonOP
Thank you for reassuring. I read more about it a bit and found that children passed into a client component can still be a server component unless they themselves explicityly use 'use client'.

I'll read more about tanstack/react-query. Does it work in a similar way as useContext to share user across the app?
You can implement it like react context for example: you make a custom hook just say useUser, and add all logic to there so whenever you use this hook you get immediate results because it chaches the data onces fetched
Chum salmonOP
sounds amazing. thanks man!
You're Welcome!
You can now mark my comment as answer
Chum salmonOP
hm.. how tho
🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in <id:customize>

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)