Next 14 + React Query COMBO with Server Actions and RSC
Vložit
- čas přidán 26. 10. 2023
- 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 - Věda a technologie
Another thing worth mentioning at 2:55 is that the products get fetched only on the initial page render, so if it's a value that's going to be dynamically updated (like a chat log) you won't be getting fresh data by simply passing the fetched data as a prop. I had to learn that the hard way and that's what got me to finally start learning react query.
Amazing ! I was exactly looking for this. Happy to know someone experimented it and show cased it ;)
I really enjoy watching your videos and love the candid/chill way you explain topics.
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
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)
awesome example, really pulled together various pieces for me.
Finally server actions are no longer experimental. Nice video Ed (:
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.
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.
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
Really nice, happy to found this video.
Subscribed
Hydration Boundary seems really good, have to try it. Thanks!
thanks man, it your website works again!!
❤
can't wait for your new course!
Wow ed:) ❤ please could you make it a role based like admin and user stuff for production grade projects within prismA and PostgreSQL please 🙏
Couldn't help but subscribe, I was just wondering how would these things work together, seems like im building something soon!!! Thx a lot
Just in time, i was search for use react query with nextjs but i didn't find anyting useful thanks Ed
Thanks ed very helpful !
Thank you!
I did it!
A fresh new nextjs course in detail would be totally great at this point... btw loved the video as always
Oh yeahhh, would love to see something with Nextjs - Typescript - React Query - Zustand. That would be 🔥
Definitely!
Thank you so much.
amazing. thanks
Большое спасибо, действительно крутой подход! Если встречусь то пожму руку и сфоткаюсь😅❤
Wow, and he does it all below ten minutes 😮👏
I am gonna start speed running tutorials 😂
Sounds like amazing vid just by the title
great stuff
thank you mate
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?
Nice what I’ve waited for
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.
Where can i find those awesome backgrounds that you use on your windows desktop? p.s. your full stack course is awesome!
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?
Yeah!
FIIIIRST ! I love your intros !😄
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!
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.
I’ll use remix
I've just tried, the second approach types data as | undefined. And the reason it is typesafe is because youre using server actions
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
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.
I got stuck with invalidation problem myself. couldn't get to work.
what did you mean by having to call two function every time?
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 ?
Cool 👍👍
jokes on you, i didn't see a 9 of diamonds, i saw a 10 of diamonds lol 😂
What is your thoughts on next.js not recommending to do data fetching through server actions?
THATS WHY HES THE GOAAATTTTT
hey
developedbyed, is there any update soon in react.js ?
Plz make long video on redux toolkit and react query with project 😊
Redux has Redux query then why use react query? Correct me?
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?
hey Ed, i enrolled for the JS course but cannot access the portal now, can you please do something about it?
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.
Can I keep the queryClient object in a RootLayout, if I choose the second, HydrationBoundary method?
Thank you for the tutorial.
@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
which method is good and stable to use?
Is it necessery to put queryClient (new queryClient()) inside a useState?
Same question, first time I see that
Yes. It's necessary if you initialize queryClient inside Provider function
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.
Is there a way to do similar thing with Apollo client?
Just wondering, does this approach affect the SEO capabilities of Nextjs?
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.
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?
But why do we need react query inside Nextjs14 when the framework itself is giving you the caching and all ?
why should you make the QueryClient Class a state? 1:40
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)
If i use just Reactjs, should i use vite or create react app ? Is Vite production ready ?
use vite, don't touch create react app
how do you invalidate queries?
Why developers are not using react-router fetching methods on rendering the url? I saw video yesterday and seems quite simple and powerful
Which video? That sounds interesting.
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
why do you use useState to initialize the client
vs code theme that u are using pls
It was the 10 of diamonds. Jokes on you 😜
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?
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.
You can disable that behaviour with the refetchOnWindowFocus paramater
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 ?
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.
It's because TanStack Query passes it's queryFn props down to the server action, this will work
queryFn: () => getProducts(),
I also get the same error in next 14.0.3, did anyone find a solution?
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'],
});
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))
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.
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
next needs to step up their game, it's already 2023 and they're still in 2014
yeah totally, server actions are pretty cool tho
really? That’s quite the opposite of what I think of Next…
Please Elaborate, what do you mean by "in 2014"
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 :)
async/await is not yet supported in Client Components, only Server Components
Im not getting notifications for your videos sometime
I tried it with tanstack table and shadcn… mission failed.
I am getting a client error and I do not know how to solve it. I have a barebone project just following this steps
Why initalize the queryclient with usestate?
To make sure that queryClient only initialize once. It's the same as if you initialize queryClient outside of function scope without useState
hello , iam still learning next 13
at least , let me finish it first
There are no significant changes in the Next 14
are you updating the next course?
He already updated it two times, doubt he will do a thrid one.
@@s3nTer theres a few thing that say they are deprecated ever since i got the code
EHHH THERE'S NEXT 14 NOW??!!
See you tomorrow in the next video where I will cover Next 15 👍
I literally just started an app 2 weeks ago in Next....now have to update...fk web dev life😂
Wdym, there is no new API in Next 14
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)
@@mhdfryeah ...it was a reaction comment before I did more research and the update for me went much better than other times
@@JohnBuildWebsitescommented on video before I attempted to update and before video finished...life was good after and during the update 😅
9:33 @@pedro.zurita
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
Skill issues
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
@@neoesmyeah good luck asking you client to dumb down all of their code base from 10k React code to simple single js file. 😂
@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.
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
Why create a queryClient again?
Why does the video say next 14 but it look like he’s using next 13 in the video?
Isn't it Next 13?
Why do you keep queryClient in a state (1:27)? Can't this be a const? (I think it can)
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
Each version gets more complicated and verbose.
guys don't buy his courses he bans anyone who asks questions
How can I help? Send me an email through
@@developedbyed now you want to pretend what a sad child you are.
No AI discussions here?? When AI gonna replace web developers?