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

My Professional React & Next.js course is out now! Find it here: bytegrad.com/courses/professional-react-nextjs -- this is the #1 resource to master the latest React & Next.js, my absolute best work.

i'd prefer react-query + trpc or react-query+server-actions(yes 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.

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!

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

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!

Great content!! new insight achieved, thank you !

What a great video bro. Making things clear and understanable

High quality video, thanks!

really appreciate these indepth videos

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.

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!

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

the best nextjs vids! thanks so much for this man

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

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.

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

"If you do client side fetching [...] after a user action, for example, an infinite scroll [...] in that case, you may still want to use react query" You cannot imagine how much time I spend to make sure server actions were not appropriate for client side fetching. Holy cow. THANK YOU ♥

Great video !

amazing! Thanks :)

9:32 we have a separate backend and I set up code generation that generates fetch functions with the correct types from the same openapi spec that generates the backend routes and types. It's quite a nice way to work. I'm not a huge fan of having nextjs do things like interact with the db etc, that's much easier to structure and test in a dedicated backend (we use nestjs).

Thank you so much for your greate content ♥ I have one question please, what do you think about using GraphQl instead of prisma ORM ?

the goal using trpc instead server actions is the option to set private and public routes, for example in t3(theo stack) nextauth is integrated greatly and you can use this trpc mutation with loged users

I've just bought your courses thanks to this video. This video is very informative.

react query is also cached, along with the paths. And on client you can have dynamic data, optimistic updates, etc so in a web app you'd still want to use it. On a site for sure not

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

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

I came in as a skeptic but you convinced me to give it a try

Great tutorial! However, it would be helpful if you could also cover how to invalidate the cache in Next.js. In software development, it's crucial to remember that overfetching is often preferable to underfetching for better application performance and user experience. Looking forward to more insightful content from you!

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

"So good! Compact and clear. Throughout the entire video, I was thinking, 'Hmm... Yeah, that's all true, but there's a big downside you didn't talk about.' And then, in the last minute, you also clarified on this 😂👍 (I'm talking about the usability in external apps). Thank you for the nice video! Until it's possible to use the full power of Next.js built-in solutions in RN and so on, I completely agree with you; there is no more reason to use React Query or TRPC."

fantastic

How do you await fetch in a client component? Can you just make an async client component?

When working on a very large project, React Query is still necessary because in large applications, data fetching isn't typically handled directly within components. Instead, server actions are utilized. Additionally, Next.js does not cache API calls made within server actions, at least not as far as I know. If I'm mistaken, please feel free to correct me

This is just if you’re using server functions, yes? So if I’m still on Nextjs 13, I should stick with React Query?

thanks. now i know server action. i never used it before.

What's your opinion of NextJS and Graphql? As now we have server components, server functions, routes, and the BE and FE are working closely, do you believe it's still makes sense the extra setups Graphql requires to get it's advantages like api documentation?

Hey is the code available for testing? All 3 approaches?

if you refresh the page, it will request again right? then the concept would be same like using state management like zustand then? just need to avoid useless render page and store data temporarily on zustand?

The t3 stack make all this perfect.

How could you revalidate the NextJs cache? Automatic caching is good but we should have ability to manage the cache life time also

Good video. Sucks Vercel hates React Native so much.

give a tutorial video of this project, i really like the user interface of it and would like to explore how you build this application each component part looking very neat.

Can someone tell me how server actions work? A HTTP request is still made to the backend, right?

Is there another way for handling fetching on the server side without using fetch? as its syntax is well, not my favorite.

Awesome content

I love the idea of server actions, especially to make database requests etc. But if I have a database with personal data, I need to protect the server action from being called. That is why I am frustrated at the moment. I am using server actions for such database queries. However, whatever I do, I cannot protect the server function from being accessed from anyone from the client side. The function is in a folder utils alongside app. The can use it from client side but so can anyone! I have looked everywhere, but I cannot seem to find how to handle that…

how would you combine nextjs with a .net backend api?

18:08 You mention how we can use clients outside of Next.js with tRPC. Could you still use tRPC endpoints on a Swift app for example though? I mean if I used Next.js API routes then I can definitely use that but I'm not sure about using tRPC outside the same project. I believe this is possible within a monorepo/Turborepo if you have a Next.js app with tRPC endpoints/procedures, and then a React Native app could consume those tRPC endpoints/procedures.

quality content

Kinda reminds me of what Meteor was! But more up to date/standards

You mentioned that server actions are like POST but can't server actions do a GET too?

Within a server component, what do you use when calling anything other than fetch to an http endpoint? Does the server side data-cache only work for fetch calls? What tool or method would you use to make a direct sql call to get the information you need for a server component?

I don't understand why using type unknown is better than specifying the typeam I because in the server action, you verify the schema and the data type. What I am not seeing well at this?

Will there be another video? ... Why use SvelteKit? :D

Have you checked out next safe action package - would make a great video.

The downsides you listed are the same reasons we moved away from this format in PHP, Rails, and so many others. Server Side Actions are acceptable if you are only ever going to use your data in that one web app. But why not spend more time creating an API layer that will unlock future growth? Separation of concerns and all that? What happened to mobile-first design principles? This isn't just UI media breakpoints. It is designing sites that can work well with limited or even no connection. In this example, a job site, I sure would want to be able to browse and save jobs on my phone.

Do you guys even measure your crud response times in dev tools? I have implemented todo using react server actions in 5 different ways and I can't get pass 350 ms latency on a turbo simple todo, ever, meanwhile with tanstack query im below 100ms....

i got into problem with just using server components and server actions, everything was fine until I had to do error handling. instead of just fetching an error amd showing them, I'd probably have to wrap the components with error boundary and lose the custom error handling mechanism for each components or page withiut having to spam error boundary on every componebets. Or am I doing it wrong ? Another problem I got was having an onClick handler in a component and I cannot make it a server component anymore. I could try with URL modifications but that was not a page and was a component, so soon I had to use useEffect or react query alternatives anyway. And its not the issue, the issue is now trying to mimick similar loading and error state as you did with error boundaries. It just became a headache to me. This example is probably an easier ones and works best I agree, but when you go one level complex and complex again, it just starts to be a headache imo. Then on top of that try modals with app router and error handling or routing and data cache invalidations with server actions (invalidating a client component fetchers) does anyone have any experience or bootstrap modal of these on how to model these and create the best structure to handle them?

🔥🔥🔥

Hope to see a video in my recommended named "Why I don't use React anymore" someday :)

Okay, what if i have very huge amount of data? Is ISR still can be solution? I think next js caching good for only static data, good for landing page data but not for dashboard apps where you have more than 2000 page data. It becomes a joke to make 2000 pages on build time. So, unfortunately, we still must use client side caching like react query or redux

After watching this i appreciate how good laravel is now nextjs is following that methodology

Alright plz give a reply for this scenario. You are using custom server and you need to validate the user to fetch api on sc by attaching token on header for authorization. How do you validate user in client and server components. Don't want to use any pkg like nextauth.

so for simple apps next js is good. but when app is growing nextjs caching is not that good enough and you have scalling issues with amount of API growing.. No nextjs in my life for sure

What about next safe action with server actions

At 11:30 what about client component? There I have to use trpc?

I see that react query is useful in react native projects.

I wouldn't say caching is the sole reason someone would use React-Query for. It also abstracts common necessary variables like isLoading and Error, which needing to handle that in comparison to a hook that already does that for you with the bonus that it has caching, I don't see a reason why someone would not use it just because NextJS has caching. Unless it would conflict with NextJS caching, but would it?

I wanna ask can I make button with formaction when user click it will rediect them to another page?

Can anyone tell I am using a state management tool like redux and I have a token store in my local storage. Can I get my user details on server side in any way and then can update my states

Raact Query is useful beyonf fetching data. It's allbout about asynchronous operations on the State.

How to convert react to pdf?

What is trcp I don't know about it

Honestly I hate fetch, can you make some video about axios in next js on both client and server?

Comment unrelated. I love this comment so much which I ready earlier in some other video. Someone made this comment which was going in my mind too, he said "I believe 100% whatever this guy says" and I cannot agree enough 🤣 I believe in Wesley supremacy 🛐

It would be nice if react router loaders were compared too

I love redux-toolkit ❤

Why not fix the cache?

What is a React “feat or feet” app? Mentioned at 4:30 please. Thanks

Agreed, they are not React/Next, like I wont like nestjs instead of node, they are wraps, not authentic product.

Angular 17

please update the video title by adding "in nextjs"

While I completely agree that NextJS tools have come a long way, there are still many things that it can't do better than these tools. For a simple dashboard, obviously framework native tools easier and cleaner, but when your product needs cache invalidation or route groups requiring API tokens, React Query and tRPC does it better. There isn't a feeling more daunting than realizing that your janky custom workarounds are standard in a package that simplifies your workflow.

No way, Vercel team is completely vendor lockin customers through sponsoring such developers to use more and more next js dependencies. Its a game that everyone western software company plays.

Does there exist a proper implementation of infinite scroll data without using react query prefetching in Next.js server components?

Not really sure if the change was for the good of bad, only time will tell...

I enjoyed watching this video but chasing the latest shiny thing is not sustainable. If you want to cache calls, just set the appropriate header. If you want to return more records in one call, implement paging. I believe a better approach is to use the platform and learn the concepts, instead of installing yet another dependency and refactoring a whole project. As for server side rendering, I don't imagine it'll ever be competitive as an enterprise solution. We've been there and tried that.

It’s a pitfall indeed, it seems i missed key in my Suspenses

Honestly, it's like everyone's ditching Next.js for Vite these days. Next.js kinda tries to be a jack-of-all-trades, bundling everything together-it's like they went overboard with the whole abstraction thing.

a "feet" app? 4:21 why have I been using React for years, and never heard this term?? i feel dumb.

Feet app?

Does this work outside of Vercel though?

It sounds you are saying feet app and i had no idea ehat you meant lol

how about SWR

Hey. Thanks for the video. But the name is obvious clickbait. You covered there only the very basic case. Data loading with static cashing. But what will happen if this information becomes user-specific? Plus, let's say, with client-side updates. revalidatePath/revalidateTag are not the best options there, as they affect not only client-side router cache, but also server-side cashe (I mean Next.js Full route cache). The best approach there will still be using client-side async state managers like SWR/React-Query/etc. With initial server-side loading using RSC we update client-side cache and operate with it.

but in next js when you fetch data its fetched twice ==== the same as react im not react dev just i like to comment

Yeah you don't need the OG, the only robust data fetching solution, the REACT-QUERY 🔥.. As long as you are not making a Todo app 😂😂😂. React query will stay relevant and no.1 as long as it is about async state management.

Great now you are vender locked

put simply you don't use client components, real time data or anything of that sort.

React query is great, Next.js and trpc is literal garbage (has place in personal projects), why would you want your BE written with TS for a real project.. ??? Next.js is such a convoluted mess it makes me sick.