Why I don't use React-Query and tRPC in Next.js

👉 Discord: all my courses have a private Discord where I actively participate

⏱️ Timestamps:
0:00 Intro
0:20 Data fetching before React-Query
2:20 Data fetching with React-Query
8:55 GET / Query before tRPC
9:45 GET / Query with tRPC
11:40 POST / Mutation before tRPC
12:25 POST / Mutation with tRPC
13:08 POST / Mutation without tRPC (Server Actions)
18:33 Overview

#webdevelopment #programming #coding #reactjs #nextjs

[irfantayyib]

Hey, you are one of the few youtubers I have subscribed and I rarely comment on videos, I just want to say that please keep uploading videos and do not be discouraged in any way... Your videos are relevant and easy to understand. Thanks!

[ts]

surprised its not clickbait and actually teaching. thanks for the info

[brancode]

What a great video bro. Making things clear and understanable

[adipatima]

Great content!! new insight achieved, thank you !

[deepakchandani]

Man, you covered so many concepts with practical, real-life examples, Thanks for this 🙏

[ahmetdeniz]

i'd prefer react-query + trpc or it's possible). I love react query. because it's reduces state management complexity and usage of useEffect, also caching and handling loading states are so easy.

[VaurionX]

You describe everything so clearly and include caveats as well, which is so helpful. I am new to NextJS and am seeing the benefits of Server Components. Thanks for the great video.

[nobodysaysmynameright]

Good video. I still think it depends on the use case. Let's say you're building a sports betting site, and your page needs to be live fed (normally through polling). ReactQuery (or traditional client side fetching) is your best option. RQ also refetches when you go away and come back to the site which is harder to do with Nextjs as you physically need to revalidate the route. So I think this is a great solution for when you have content that may or may not change and you don't want to make it strictly static but you'll no doubt encounter scenarios where tradicional client side requests are of good use. Regardless, well explained, was very informative!

[lukem]

the best nextjs vids! thanks so much for this man

[backbenchercoding]

really appreciate these indepth videos

[TommyAMV]

Very good video, keep up the great work!

I faced this dilemma when starting my latest project, in which I intended to use RSCs. I was constantly going back and forth between Server Actions and tRPC. Ultimately I stuck with tRPC and I think there are still valid reasons to use it:

1. Built-in validation with Zod
2. Simple integration with React-Hook-Form
3. Using it in Next 14 pretty much disables full route caching of UI and of API requests by default, which is exactly how Next should behave in my opinion. That aggressive level of caching should be opt-in
4. You import one object and get access to all route definitions
5. We still get optional caching in client components
6. You can expose your API to other clients.

Of course you can achieve all of those things with Server Components too. Actually they even provide even more, as you can cache full API routes, which may be useful. However, it seemed like implementing them on the level that I require would simply be inconvenient, at least in their current state.

If some wrapper for Zod comes in with support for typed FormData, then I think it’ll be the good time to switch

[liammullan]

Hi, I rarely comment on tech videos. Just wanted to compliment you on this. It's very clearly thought through, simply and logically demonstrated. Many thanks.

[ayushshende]

A tutorial on how to apply correct caching in a nextjs project would be very helpful. I struggle with that a lot which page should be static and which one should be dynamic, when to use the no_store() in queries and when to not use it, etc. Your videos are really helpful, Thanks!

[EvaporatedBoy]

Thanks for the insights. In my experience, like you said, there’re always edge cases that require trpc, but the moment I implement a trpc call to fetch the same object, I have to duplicate the code from my server component’s fetch call (input validation, prisma call, etc). Also having both server calls and trpc makes things hard to find, so I always end up implementing everything in trpc.

[sanjoyrakshit]

Really very useful information and good guidance love from India ❤❤

[svict]

really cool! nextjs fetching is just missing a devtools equivalent for easy debugging

[GeekOverdose]

Ok but how do you disable caching with nextjs? What if I DONT want to cache things. Maybe its something that updates a lot

[NeoCoding]

BTW what to pass to a Suspense key if it should get an array or object? To check if it has been changed?

[phantom]

So helpful, thanks! I really like your explanations!

[venicebeachsurfer]

Do you mean V14 of next js and app router? I find the need for react-query using v12, quite a bit.