Data fetching for use in "Use Client" - Is this approach alright?
Answered
American Shorthair posted this in #help-forum
American ShorthairOP
I'm still trying to wrap my head around the best ways to fetch data and use it in a client component using the new server component / server action approach in a way that doesn't lock out my entire tree while the server fetches data.
If anybody has a good tutorial video please let me know. This is what i'm trying now.
I have a top level "page" server component. In that I load in other client use and server components.
When I need the data to be used in a client component because I need to sort and search it, I just import a client component in a server component and pass the data through props.
Something like the image. Am i heading in the right direction or is this a complete misunderstanding of how all this should work?
Thank you very much in advance
If anybody has a good tutorial video please let me know. This is what i'm trying now.
I have a top level "page" server component. In that I load in other client use and server components.
When I need the data to be used in a client component because I need to sort and search it, I just import a client component in a server component and pass the data through props.
Something like the image. Am i heading in the right direction or is this a complete misunderstanding of how all this should work?
Thank you very much in advance
12 Replies
Yup, if you want to fetch data you do those in server components
to counter prop drilling you can have context wrappers
but since i think your example is going one level down, its fine to just send props
@American Shorthair
@Arinji Yup, if you want to fetch data you do those in server components
American ShorthairOP
appreciate the response, happy that i'm getting closer to understanding some of this stuff.
Do you by chance have a video or source that would help me understand context wrappers? Thank you again 🙂
Do you by chance have a video or source that would help me understand context wrappers? Thank you again 🙂
Answer
Speak of the devil type of moment aye :D
@Arinji Speak of the devil type of moment aye :D
American ShorthairOP
awesome thank you! 🙂
No worries, mark the answer if it has solved your question
@Arinji to counter prop drilling you can have context wrappers
American Crocodile
What confused me about prop drilling was passing the data to all page components.
For example.
app/page.jsx has a server side fetch which I want to pass to all child pages such as app/quiz/name/page.jsx, app/quiz/name2/page.jsx etc
Is this an incorrect way to think about this? Context providers do seem like the best course of action for my use case. I'm just more trying ensure I understand how Next wants us to work.
For example.
app/page.jsx has a server side fetch which I want to pass to all child pages such as app/quiz/name/page.jsx, app/quiz/name2/page.jsx etc
Is this an incorrect way to think about this? Context providers do seem like the best course of action for my use case. I'm just more trying ensure I understand how Next wants us to work.
@American Crocodile What confused me about prop drilling was passing the data to all page components.
For example.
app/page.jsx has a server side fetch which I want to pass to all child pages such as app/quiz/name/page.jsx, app/quiz/name2/page.jsx etc
Is this an incorrect way to think about this? Context providers do seem like the best course of action for my use case. I'm just more trying ensure I understand how Next wants us to work.
since the question is already solved, it would be better for you to make another forum post, and ping me in it.
American Crocodile
Sure. I commented here as the context is all here. No worries, cheers mate