Next 14 + React Query COMBO with Server Actions and RSC

Check out my web dev courses below🔥
developedbyed.com
-------------------------------------------------------------------------------------------------
Ever wanted to setup Next 14 with React query? Well there are actually quite a couple of ways to achieve that. In this episode I will show you how I set up my react query with server actions for super easy state managment.
-------------------------------------------------------------------------------------------------
👨‍💻Connect with me
Twitter: / developedbyed
Instagram: / developedbyed
Github: github.com/developedbyed/
-------------------------------------------------------------------------------------------------
🎶 Dope tracks🔥
Leavv - Roam chll.to/15c396e0
Leavv, Midan - Bloom chll.to/0b3ee665
Leavv, dennisivnvc - Coast chll.to/e77956eb
C Y G N - Sunset Drive chll.to/d66020b5
#react #javascript

[@marcvanrenterghem5468]

Amazing ! I was exactly looking for this. Happy to know someone experimented it and show cased it ;)

[@FishReporting]

I really enjoy watching your videos and love the candid/chill way you explain topics.

[@syv_31]

One note that if using the hydration approach you should add refetchOnMount: false and refetchOnReconnect: false to the query options (inside the client component) so that the query is not re-fetched when the client is hydrated.

[@llchillerll]

Yes, of course, thank you for the tip. Perhaps a better solution can be to set the 'staletime', so it will only be refeteched if the stale time is expired

[@noxiousbrainiac]

I was looking for the state managment like this before i had found this video..... Thank you very much, you are the best !!! It's the best combination of frontend application ( Next.js 14 + Tanstack ) I loved it

[@SharunKumar]

Omg! Thank you so much for this video especially 1:26 where queryClient is initialized as a one time state. Helped save couple of hours of debugging where I wasn't getting the prefetched data correctly. Earlier we had defined the queryClient as a const in the module scope which was causing the issue (currently even the TanStack docs also show the same in the example)

[@VincentFulco]

awesome example, really pulled together various pieces for me.

[@ekchills6948]

Finally server actions are no longer experimental. Nice video Ed (:

[@alkebabish]

I've been trying to get my head around this for ages. I've used the code before without understanding it, but now I understand what the Hydration boundary actually does, it saves having to pass the server data down as props.

[@keymoment]

Wow ed:) ❤ please could you make it a role based like admin and user stuff for production grade projects within prismA and PostgreSQL please 🙏

[@user-oz6ro7vk1j]

thanks man, it your website works again!! ❤

[@developerpranav]

Hydration Boundary seems really good, have to try it. Thanks!

[@kamilzowczak3607]

Really nice, happy to found this video. Subscribed

[@cuentamovil456]

can't wait for your new course!

[@raindear811]

Thanks ed very helpful !

[@BRP-Moto-Tips]

Couldn't help but subscribe, I was just wondering how would these things work together, seems like im building something soon!!! Thx a lot

[@Hexa-IT]

Great video, at 1:17 why do you have the query client in a state instead of defining it above the Providers component as recommended in the docs?

[@licokr]

Thank you very much for making a great video 👍👍👍 , I have a question, is it possible that Wrap all components with HydrationBoundary in root layout, then make only one queryClient(define outside of function to export) and pass it. In server components, import the queryclient instance and use prefetch.

[@saadchraibi6712]

Awesome! Thanks for the tutorial! What is the main benefit of using getProducts function in a server action vs. having the getProducts function in a separate normal file ? I've read that it offers typesafety. Could you explain why?

[@moezzat]

Just in time, i was search for use react query with nextjs but i didn't find anyting useful thanks Ed

[@rog0079]

A fresh new nextjs course in detail would be totally great at this point... btw loved the video as always

[@goncalosantos3604]

Oh yeahhh, would love to see something with Nextjs - Typescript - React Query - Zustand. That would be 🔥

[@johnpaulpineda2476]

Definitely!

[@NirdeshPokhrel]

Thank you! I did it!

[@lucaapa]

@developedbyed Hi, I have a question: currently, this process involves fetching data twice, once on the server and again on the client. why just dont fetch it on the client? ty

[@seonyeongjang3459]

Thank you so much.

[@Kim-by5uy]

amazing. thanks

[@maxstrootmann]

Where can i find those awesome backgrounds that you use on your windows desktop? p.s. your full stack course is awesome!

[@akadaygame8634]

just want makesure in 01:08, you said: in next.js > 13.00, Will the children component still render server-side even if client components wrap it?

[@arvindiyer4813]

Hey Ed and Community I tried to set up a hydration boundary at a Layout Level and I wanted all routes under that layout to have access to that data irrespective of whether it was a Client Component or a server component How can I do that ?

[@codernerd7076]

Wow, and he does it all below ten minutes 😮👏

[@developedbyed]

I am gonna start speed running tutorials 😂

[@zzgkmzz]

Sounds like amazing vid just by the title

[@DoSmth]

Большое спасибо, действительно крутой подход! Если встречусь то пожму руку и сфоткаюсь😅❤

[@pooyadehghan17]

great stuff

[@27sosite73]

thank you mate

[@jamieblair4336]

Just wondering, does this approach affect the SEO capabilities of Nextjs?

[@VincentFulco]

Weird, with next.js 13.5.6, the prefetch gets the correct number of items in my aws dynamodb table but the query being pulled in from the component doesn't. the table I am rendering shows stale data from hours ago.

[@techwithimad4672]

FIIIIRST ! I love your intros !😄

[@user-oz6ro7vk1j]

hey Ed, i enrolled for the JS course but cannot access the portal now, can you please do something about it?

[@akosbalint3485]

Can I keep the queryClient object in a RootLayout, if I choose the second, HydrationBoundary method? Thank you for the tutorial.

[@paw565]

I have a question. What if I want to prefetch different data on another pages? I'm afraid that creating many queryclients might end up really bad. Is there solution to this problem?

[@iscars]

Hello. What about using invalidate tags on the server side? As far as I understand, by default, server-side use of prefetch query does not cache data, and the server fetches fresh data from the API each time. I want to cache the data and update it manually as needed, for which I need to manually set the staleTime option to Infinity. But then, how do I perform revalidatePath or revalidateTag on the server side? queryClient.invalidateQueries doesn't seem to work for this. I couldn't find information in the React Query documentation. The Next.js documentation only provides examples with fetch.

[@timetosleep8055]

Why is the first load js so huge when adding react query? Its around 380kb. Im using the fetch on server and hydrate on client approach.

[@aurorasofie]

What is your thoughts on next.js not recommending to do data fetching through server actions?

[@_Yolandi]

Nice what I’ve waited for

[@AlexSpieslechner]

i see two potential issues: when mixing server actions and react-query, how do i invalidate properly without having to call two functions every time? second point is access control. with middleware, i can lock users out of url structures by auth state or role. by splitting up rsc and server actions i manually have to access check im both.

[@mshahzebraza]

I got stuck with invalidation problem myself. couldn't get to work. what did you mean by having to call two function every time?

[@stevebendersky2056]

iis it possible with useSWR? is it possible with seperate backend (and not using server actions, just feetch data with seperate backend on diifferent port)

[@ABDIRIZAKCODING]

hey developedbyed, is there any update soon in react.js ?

[@adhiariawan8108]

Hello, I've encountered error while following your 2nd option: ⨯ node_modules eact-query\es eact\QueryClientProvider.js (2:34) @ React ⨯ createContext only works in Client Components. Add the "use client" directive at the top of the file to use it. Could you advise me on how to solve this? Thank you

[@user-xu1zy7pn2q]

which method is good and stable to use?

[@trunkey-dev]

I can't understand, I am trying to search a solution for SSR or mabe SSG in NextJS 14 with React-query-v5. But it keeps showing that they are using it with 'use client'. Is it because that is impossible to make the server do the request itself usng react query, then continue refetch in client after

[@ontanicolae1794]

I've just tried, the second approach types data as | undefined. And the reason it is typesafe is because youre using server actions

[@ontanicolae1794]

also, fetching data in the navbar and then using it in a completely different page didnt load what i fetched on the server first either

[@mralmazmech31]

Is there a way to do similar thing with Apollo client?

[@codingintelugu8820]

But why do we need react query inside Nextjs14 when the framework itself is giving you the caching and all ?

[@anonymousmangalorean]

why should you make the QueryClient Class a state? 1:40

[@lakshaymanchanda2322]

why do you use useState to initialize the client

[@charllabuschagne2169]

Yeah!

[@user-qc8ux9xm3y]

I'm pretty sure my comment is not the first on this, but , Ed, could you please share your wallpapers? 😄 And thank you for your videos!

[@waleedsharif618]

If i use just Reactjs, should i use vite or create react app ? Is Vite production ready ?

[@developedbyed]

use vite, don't touch create react app

[@DEFENDER748]

HIIIIIIIIIIIIIIIIIIII, how are you. Trust me its been so long i watched your video, i saw your video kicking mouse. Don't know why but missed you.

[@footballforlife09]

HydrationBoundary doesn't seem to work and by that I mean, I see the api request being made in the client component, I can see the api call in the network tab, so if you have 2 child components where you're using useQuery providing the same query key, both components seem to make individual api calls on their render. Weird behaviour, don't understand what to make of it. And yes I have tried staleTime, cacheTime, nothing worked. Infact in one of the tract query blogs, it's said even if you don't provide staleTime, it would cache for sometime.... Which means it should serve the data from the cache and not make new api requests, but doesn't seem to be the case, with our without the options like staleTime etc.

[@gaaames]

how do you invalidate queries?

[@jovanjevtic1620]

Is it necessery to put queryClient (new queryClient()) inside a useState?

[@theangelofspace155]

Same question, first time I see that

[@rizi5353]

Yes. It's necessary if you initialize queryClient inside Provider function

[@ayushgogna9732]

I’ll use remix

[@dummymail2495]

Why developers are not using react-router fetching methods on rendering the url? I saw video yesterday and seems quite simple and powerful

[@richchar6478]

Which video? That sounds interesting.

[@maskman4821]

Cool 👍👍

[@salahdaniel]

vs code theme that u are using pls

[@user-sp4up7zn4z]

THATS WHY HES THE GOAAATTTTT

[@manuelpineda924]

I am getting a client error and I do not know how to solve it. I have a barebone project just following this steps

[@locodev770]

super interesting Ed. I think i'll try myself because i'm wondering if most of my components should be client side and if the server rendering still works [UPDATE]: It looks good at first sight but i don't see the benefit of using react-query aside avoiding passing the paremeter. Eg. Let's say we have a component for tabs with links that filters the posts, every time i click a tab it goes back to the server even when is not necesary and the alternative is to use a state management again like redux instead of navigating to another route. Any ideas?

[@JuicyBenji]

React Query is handling state management for you, the response is cached so it will only go back to the server if the data is invalidated. That's why react query is nice. Then if you want to use the data elsewhere as long as you pass the same key, all components can access the shared cache instead of making a new call. On top of that it gives you a nice api when you want to revalidate or update, like loading, error, etc.

[@euanmorgann]

You can disable that behaviour with the refetchOnWindowFocus paramater

[@AlexJohnSuarez]

async/await is not yet supported in Client Components, only Server Components

[@hubesh716]

Plz make long video on redux toolkit and react query with project 😊

[@nirajbhanushali7693]

Redux has Redux query then why use react query? Correct me?

[@user-vd3ph6zh8q]

jokes on you, i didn't see a 9 of diamonds, i saw a 10 of diamonds lol 😂

[@muamarhumaidimubin4438]

i got error "Only plain objects, and a few built-ins, can be passed to Server Actions. Classes or null prototypes are not supported". next 14.0.2 ?

[@JuicyBenji]

Did you find a solution? I'm also struggling with this exact issue. It's weird because it looks like it works, the correct thing is shown on the screen for about 1 second before the entire thing crashes. The error is also not helpful because I have no clue where this error happens.

[@Hexa-IT]

It's because TanStack Query passes it's queryFn props down to the server action, this will work queryFn: () => getProducts(),

[@JaeTask]

I also get the same error in next 14.0.3, did anyone find a solution?

[@aurorasofie]

I think I just found a solution after struggling for a while. Try it out​ @JaeTask @JuicyBenji const { data, error, isLoading } = useQuery({ queryFn: () => { return getJokes(); }, queryKey: ['jokes'], });

[@94KurczaK94]

For me the following worked: 1. Don't do { queryFn: getSomething }! Do { queryFn: () => getSomething() } instead. 2. Serialize the data returned from queryFn, for example: JSON.parse(JSON.stringify(data))

[@theangelofspace155]

Why initalize the queryclient with usestate?

[@rizi5353]

To make sure that queryClient only initialize once. It's the same as if you initialize queryClient outside of function scope without useState

[@peterhamilton9387]

It was the 10 of diamonds. Jokes on you 😜

[@GabrielMartinez-ez9ue]

I tried it with tanstack table and shadcn… mission failed.

[@w1llow01]

are you updating the next course?

[@s3nTer]

He already updated it two times, doubt he will do a thrid one.

[@w1llow01]

@@s3nTer theres a few thing that say they are deprecated ever since i got the code

[@BeepBoop2221]

Im not getting notifications for your videos sometime

[@wasd3108]

next needs to step up their game, it's already 2023 and they're still in 2014

[@developedbyed]

yeah totally, server actions are pretty cool tho

[@mario_luis_dev]

really? That’s quite the opposite of what I think of Next…

[@st7171]

Please Elaborate, what do you mean by "in 2014"

[@1000sh]

Some people are reminding the PHP in terms of server action. But when it comes to tons of others benefits like UI Components, State managements, the NextJS cannot be compared with PHP. And server action functionality is also optional so far. I can understand why they don't like this updates, it just my opinion tho :)

[@AliMohamed-jt2kq]

hello , iam still learning next 13 at least , let me finish it first

[@victortimi]

There are no significant changes in the Next 14

[@user-mx8ij4tk6i]

Why do you keep queryClient in a state (1:27)? Can't this be a const? (I think it can)

[@EmilleJunior]

It is recommended on tanstack's documentation. Something about security issue, avoid leaking data to other users. Because it is run and cached on the server

[@ilikespaghetti2170]

EHHH THERE'S NEXT 14 NOW??!!

[@developedbyed]

See you tomorrow in the next video where I will cover Next 15 👍

[@swimmyJones]

Why does the video say next 14 but it look like he’s using next 13 in the video?

[@BarakaAndrew]

While I understand this I cant stop thinking why is it so complicated? For newbies on web development where should they even begin? Too many frameworks, too many ways to do something, also teaching someone react, nextjs, hydration concepts, giving them reason why things work the way they do, it’s a huge hill to climb ngl

[@user-qq7yc1qp8z]

Skill issues

[@neoesm]

Your comment doesn't make sense. You don't have to use any of these tools or frameworks. You can do your work in a single index.html, it will still work

[@vivekkaushik9508]

​@@neoesmyeah good luck asking you client to dumb down all of their code base from 10k React code to simple single js file. 😂

[@vivekkaushik9508]

@BarakaAndrew agreed. JS world is keep getting more complex with all of these frameworks trying to one upping and copying from each other. They are all the same, do the same things but each one has its own USP. If only Facebook invested in React more. We won't have these many frameworks.

[@BRP-Moto-Tips]

I think most of the job opportunities, and competetion too are going with React. Nextjs is built on top of react, most of the other relevant options have similar syntax to React, I'd go with it too if i had to start over. Moreover, get really good with it, learn to use Global state managers (I like zustand) then try react query and have a look to the things you can build, that will increase a lot the quality of the things you design. Then using nextjs instead of react will be only a minor adjustment

[@pedro.zurita]

I literally just started an app 2 weeks ago in Next....now have to update...fk web dev life😂

[@mhdfr]

Wdym, there is no new API in Next 14

[@JohnBuildWebsites]

They update number based on Node, not on breaking changes. V14 has no new APIs and took me seconds to update (just a small change in the next config)

[@pedro.zurita]

​@@mhdfryeah ...it was a reaction comment before I did more research and the update for me went much better than other times

[@pedro.zurita]

​@@JohnBuildWebsitescommented on video before I attempted to update and before video finished...life was good after and during the update 😅

[@Aretha735]

9:33 ​@@pedro.zurita

[@redcodemohammed]

Isn't it Next 13?

[@airixxxx]

Each version gets more complicated and verbose.

[@vasi2134]

No AI discussions here?? When AI gonna replace web developers?

[@lycan2494]

guys don't buy his courses he bans anyone who asks questions

[@developedbyed]

How can I help? Send me an email through

[@lycan2494]

@@developedbyed now you want to pretend what a sad child you are.