Fetching in 'use client' components
Answered
Cape lion posted this in #help-forum
Cape lionOP
Hey guys, when it comes to 'use client' components, should I fetch from the same route inside every one separately, or fetch once higher in the hierarchy and pass down as props? I'm not familiar with state managers, so I'm not sure what I can or should use. I only know about prop drilling and I don't want to do that.
https://nextjs.org/docs/app/building-your-application/data-fetching/patterns#fetching-data-where-its-needed
Is this applicable only to server components?
Thank you.
https://nextjs.org/docs/app/building-your-application/data-fetching/patterns#fetching-data-where-its-needed
Is this applicable only to server components?
Thank you.
Answered by joulev
the documentation link is only applicable to server components.
in client components you should use tanstack query or swr which automatically handles caching for you so you can simply fetch where you need it. for example for swr: https://swr.vercel.app/docs/getting-started#example
in client components you should use tanstack query or swr which automatically handles caching for you so you can simply fetch where you need it. for example for swr: https://swr.vercel.app/docs/getting-started#example
3 Replies
@Cape lion Hey guys, when it comes to 'use client' components, should I fetch from the same route inside every one separately, or fetch once higher in the hierarchy and pass down as props? I'm not familiar with state managers, so I'm not sure what I can or should use. I only know about prop drilling and I don't want to do that.
https://nextjs.org/docs/app/building-your-application/data-fetching/patterns#fetching-data-where-its-needed
Is this applicable only to server components?
Thank you.
the documentation link is only applicable to server components.
in client components you should use tanstack query or swr which automatically handles caching for you so you can simply fetch where you need it. for example for swr: https://swr.vercel.app/docs/getting-started#example
in client components you should use tanstack query or swr which automatically handles caching for you so you can simply fetch where you need it. for example for swr: https://swr.vercel.app/docs/getting-started#example
Answer
@joulev the documentation link is only applicable to server components.
in client components you should use tanstack query or swr which automatically handles caching for you so you can simply fetch where you need it. for example for swr: <https://swr.vercel.app/docs/getting-started#example>
Cape lionOP
Thank you. 🙏 I'm mostly planning on using server components and revalidation on demand, but for handling the authentication provider and the /account page, I think I need to use client side components.
So as I understand it, I should have a 'provider' for the RQ context encapsulating everything and then I can use the RQ hooks somewhere down the tree in a component?
So as I understand it, I should have a 'provider' for the RQ context encapsulating everything and then I can use the RQ hooks somewhere down the tree in a component?