Combining React Query With Server Components (Next.js)

VSCode Theme | Font → Material Theme Darker | Menlo, Monaco "monospace"

In this video, we're going to dive deep into how to combine React query with server components. We're going to look at how to handle React query on the server, how to handle it on the client, and how to make sure that you're using it the right way. We're also going to see the use cases where it doesn't make sense to use React query at all and to just use normal fetches instead.

Let's do this 🤙

[sinasepahvand]

This is crazy!! The videos u post line up EXACTLY with my project timeline 🤯 was legit just this week figuring out react query in nextjs for my fintech project lol what are the odds?? thx so much man, saved me hours of debugging 🙌💯

[paw]

Great video. This pattern is super underrated IMHO.

Although I would like to leave a small suggestion. Tanstack query has functions for creating query options for example queryOptions or infiniteQueryOptions. With this you can use exact same options for prefetching queries and usage of useQuery hook by importing them from other file. Just a bit of DRY :)

[sherif-awad]

There are two points I’d like to mention:

1. If the data-access layer uses `import "server-only"`, how can we integrate it with server-side prefetching while still using `useQuery` on the client?
2. I believe your approach can be useful beyond infinite queries, such as when fetching data in deeply nested child components. This would eliminate the need to pass `posts` as props through multiple levels without relying on context.

[rylenlobo]

yessss!! i just implemented useInfiniteQuery in my NextJS Project this is such a good thing i got to know Thank you!!!

[TheOfficialWoover]

Great explanation!

How would you do it in tRPC?

[victoreleanya]

Thanks for sharing. Thought about this recently

[kamleshpaul]

i just did this today 😅 for infinity scroll,
thank you for details explaining by the way

[dimmasyusuf]

Hi Den, I've been using this pattern for months, but instead of using it in page.tsx itself, I think it’s better to prefetch in layout.tsx, so all the children will receive the data from the server component. What do you think? 🤔

[rp]

Great video. Which video recording software do you use for the square bubble?

[Steel]

Correct me if I am wrong, isn't this setup detrimental to SEO? I understand your argument that we can save on API calls for fetching data, and easy onboarding.
I am in a situation where I am looking into rewriting a CSR react app into Nextjs SSR app, but we are also thinking about using react query. So since SEO is a concern, should we ditch react query and fully go with Next SSR?

[AstDerek]

Thanks man. I have a non coding related question: what is your software setup for recording?
I see that your cursor moves softly through the screen, it has a little "wiggle" animation, it signals your clicks one way or another, and the blur or smearing is different between the code/editor and the cursor.

[seghirissam]

This is the best video so far about mixing React Query + Nextjs Server Component
You mention that it is good for perfermence, what about SEO ?
I was working on fetching server components using Axios combined with server actions for mutations. Initially, I thought I wouldn't need React Query, except for specific cases like infinite scrolling or polling. However, I kept facing caching issues with Next.js, and no matter what I tried, the cache invalidation didn't work. Eventually, I decided to explore React Query as an alternative, but I'm concerned about the potential impact on SEO when using prefetching.

Can I use the React Query methods mentioned in the video as an alternative to server actions and server-side fetching, without sacrificing SEO benefits?

[fatihcan]

Thanks a lot Cosden its insightful video ! Yet guys I dont know i should use tanstack for a simple e-commerce admin panel which is based on many tanstack tables (products, orders etc..). Do RSC just enough or use benefits of tanstack ?

[TheoInTech]

Would doing this require us to prop drill? How can this be used with global state management like zustand?

[michal-xp]

is there a difference between doing this prefetching and just fetching and passing data as initialData?

[columkelly]

You used getPosts in a client component, does that not ship your API with the client bundle?

You also mentioned that you don't really need React Query when you're getting data in server components, but how do you manage async state and client cache invalidation in NextJS without React Query? revalidatePath revalidates for all users and router.refresh clears the entire client cache for all routes. They're pretty useless for an interactive app. Do you use tags with the userId and the data tag combined?

[matthieumordrel]

Is using the benefit of useMutation to do optimistic updates on the client worth it compared to plain server side rendering ? I've tried many ways to make it snappy on the client using only server components, but revalidatePath seems not reliable at all, and it anyway means refetching the html from the server which is not as snappy as optimistic updates. What do you think ?

Thanks for the video anyway, really useful ! Much better explained than the doc tbh

[GhostvOne]

Can you explain how to use useSuspenseQuery please ? Thanks

[Bratislav_Zdravkovic]

Hey Cosden, how would u fetch data for modals?

For example, u have a table with options column, clicking on Edit button in a row opens a modal which has data for that row.

If i use searchParams to pass Id of the data that is in the row then the page gets replaced (pushed) with router.replace..

[Aleksey-nh]

Why is this the only template? What about the `initialData` template? Maybe your method is suitable for regular react, where there is no such flexible caching, but definitely not about next.js