Is it a good idea to use tanstack query with nextjs and server components?
As I understand, when using something like tanstack query, I just ask for the server state or data in the component where I want to use it, and behind the scenes, these requests are optimized.
With NextJS though, inside server components, we have access to the server state directly, so we do not need a server state management tool like tanstack query. However, we still need to share the server state with client components.
What is the recommended way, what are my options?
The options I can think of, with my limited knowledge:
- Pass the server state from sever components to client components with props. Do prop drilling basically. Which does not work, if we have say more than 3 client components nested.
- Use the context api, create a provider at the server component that is the common parent of the client components that need the same data, which is possibly the application's root component.
- This is more of a question, since I haven't tried: maybe use tanstack query, create a provider at the root. I am thinking this may be necessary if I want to be able to handle loading, error and success states, without a custom implementation.
Can you help me clarify this topic?
I would be super grateful for some wisdom, if you shared your opinion.
1 Reply
manual-pinkOP•16mo ago
I think I have also discovered another approach that is an alternative to prop drilling. I can call a server action that simply returns sever state.
This must be old news, I am still trying to figure this out. 😄