Next.js Server Actions (revalidatePath, useFormStatus & useOptimistic)

  Рет қаралды 162,238

ByteGrad

ByteGrad

Күн бұрын

Пікірлер
@ByteGrad
@ByteGrad Жыл бұрын
My Professional React & Next.js course is OUT NOW 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.
@angelbythewings
@angelbythewings 10 ай бұрын
Hey it would be good, if you can add a breadcrumb extension to your vscode, so users know the path of the page you are on
@davidgibradze9692
@davidgibradze9692 3 ай бұрын
Can you make short video, when to use actions and when api route, and why... pls
@ricardourbieta
@ricardourbieta Жыл бұрын
I was blown away by how cristal clear is the way you explain and showed this topic, with the example use case, I've been particularly struggling with this for a few weeks, thanks a LOT
@ByteGrad
@ByteGrad Жыл бұрын
Glad it was helpful!
@filipesommer8253
@filipesommer8253 Жыл бұрын
This video is fantastic. The way you also care about possible errors in real-world use cases and not just the "happy path" is much needed in the KZbin dev space
@koolam5158
@koolam5158 10 ай бұрын
exactly
@vernevens1598
@vernevens1598 6 ай бұрын
I have noticed quite a few KZbinrs are starting to show real world errors and not just when things go smooth. Helps newbies learn to troubleshoot.
@dallinromney
@dallinromney 11 ай бұрын
Incredible video thank you!!!! Game changer. Note @17:59 the bit of extra lag between the form pending and the new item pending in the list is simply the extra data fetch from the revalidation, since the form is only pending the creation, not the revalidation (correct me if I'm wrong experts). But as you explained seems like useOptimistic is the way to go to fix this!
@robertodelgado598
@robertodelgado598 Жыл бұрын
This is easily the most helpful video I’ve seen about forms in next. I was about to lose my mind with forms last week, maintaining states. THANK YOU!!!
@appstuff6565
@appstuff6565 Жыл бұрын
same here.
@techug2719
@techug2719 3 ай бұрын
quite ironically I was learning next using a to do list app and then boom I land on this, I love you man!
@9ernation4-life40
@9ernation4-life40 Жыл бұрын
Thanks! Awesome Tutorial very helpful for me
@ByteGrad
@ByteGrad Жыл бұрын
Thanks, appreciate it!
@edhahaz
@edhahaz 8 ай бұрын
I can totally see the vision, but oh man it's a lot of concepts building on top of each other.
@chukwuemekamusic663
@chukwuemekamusic663 3 ай бұрын
Thank you for this... i had to go back and refactor my code cos I was sending my submit to an API route and using the server function there. I didn't know I could use a server function in the submit function directly. Thank you so much 🙌
@appstuff6565
@appstuff6565 Жыл бұрын
Half way to the video and i loved the fact first you tried to make us understand in a single file and then slowly organized it into a proper folder structure patterns. Loving it so far.
@NursultanBegaliev
@NursultanBegaliev 8 ай бұрын
@rawnato
@rawnato Жыл бұрын
In some cases, I still prefer using an API, especially for cases where your web system also shares data with phone apps! but for web systems that don't need to share data, I think it's a good solution!
@markorral
@markorral 5 ай бұрын
Great walkthrough as always - thanks! On the 'previousState' param, I found this particularly useful for retaining field value states when using NextJS 15 and for example on a login form, especially when an incorrect login attempt is made. I think by default now Next15 resets the form fields which is helpful to some degree BUT overall much like the caching behaviour in Next14 it is not a great UX or DX in some situations.
@sahaneakanayaka3394
@sahaneakanayaka3394 Жыл бұрын
Your tutorials are awesome. Everything is crystal clear ... 😍😍
@hyper_channel
@hyper_channel Жыл бұрын
Something to consider with optimistic UI patterns is that for certain actions the users "distrust" an overly fast update, there have been studies about this where the user expect certain operation to happen and have some delay and when it seems to complete instantly is deemed suspicious.
@deadchannel8431
@deadchannel8431 Жыл бұрын
This made me feel better about my slow websites lol
@user-ri1vc4qv8j
@user-ri1vc4qv8j 11 ай бұрын
True. I was thinking that when he used it.
@alexedev
@alexedev 8 ай бұрын
Thank you for clear and quick delivery, you are very nice teacher
@stevemitto9942
@stevemitto9942 3 ай бұрын
This video is worth watching. I have been using Next.Js for quite sometime but I have learned a lot from this video on the advantages of Server Actions. Thanks man...🤝
@jeffreygarcia392
@jeffreygarcia392 4 ай бұрын
This is the best explanation by far of server actions. thanks!
@ZainabSalah-xm1xy
@ZainabSalah-xm1xy Жыл бұрын
this is amazing !!!!!!!!!!!! i searched so much to know these and u just have them all in the best way ever
@zahidulhaquejony
@zahidulhaquejony Жыл бұрын
Your amazing. I learned few new things. I always watch your video when i get free time. Keep going. Take love from Bangladesh ❤️🇧🇩
@Sokoladomeistrai-kq1to
@Sokoladomeistrai-kq1to 8 ай бұрын
Six words to support the channel
@Matunga
@Matunga 5 ай бұрын
Outstanding explanation. Your effort is really appreciated. Thanks man!
@emmanuelalfred8557
@emmanuelalfred8557 Жыл бұрын
Your videos are truly helpful, I hope this comment encourages you to not stop educating us(me) anytime soon
@mariusradu3849
@mariusradu3849 11 ай бұрын
Holy shit I wished I had this man as one of my college prof. The quality is top. The only dubious thing I need to mention is that he talks like he tryna charm you or something 😅 . Liked ✅ subscribed ✅
@codinginflow
@codinginflow Жыл бұрын
Regarding useTransition: The only benefit I've noticed is that isPending will give you a loading state that stay true *until revalidation has finished*
@ByteGrad
@ByteGrad Жыл бұрын
Ah makes sense!
@sergeiiandreiev7391
@sergeiiandreiev7391 Жыл бұрын
Thanks for video! It`s amazing because you answer on questions *why * and "how* both . And also it`s not a starting level on my opinion. So waiting to your full course )
@inderjotsingh5868
@inderjotsingh5868 10 ай бұрын
epitome of clear explanation
@diegoavendanohernandez9908
@diegoavendanohernandez9908 2 ай бұрын
super straightforward and useful thank you so much!
@NeelPrajapati-h7s
@NeelPrajapati-h7s 10 күн бұрын
As this video best describes to your channel name and it is very much helpful to understand the byte level concept of the NextJS 👌
@_tanzil_
@_tanzil_ 3 ай бұрын
My gosh... your explanation... Absolutely amazing ❤
@darocha
@darocha Жыл бұрын
Love your content! It's my favourite channel. ❤
@tigranharutyunyan7674
@tigranharutyunyan7674 10 ай бұрын
Great info presented here. Thank you. Nuxt misses this feature.
@tacituskilgore2258
@tacituskilgore2258 Жыл бұрын
Very underrated channel, dude Love your content!!
@ParaZumir
@ParaZumir Ай бұрын
The best! I’m a noob and it’s hard but its very good explained compared to the other tutorials I’m watching. THX a lot
@reactwind
@reactwind Жыл бұрын
THANK YOU SO MUCH WITH THE CLENT COMPOENT!
@y0ssef
@y0ssef Жыл бұрын
21:50 here you can use the prisma auto generated Todo type (if your data types are all primitive [for example if the id is Int and not BigInt] which is the case mostly)
@MCTVARG
@MCTVARG Жыл бұрын
Amazing video, a real summary, better than reading the docs. After watching your video and trying it out, being a nextjs user for long I just fail to see the benefit of going this route. I guess it does have benefits if your using next as your standalone application, but client components work just fine for forms, and its the way we've been doing things for long. All of these experimental tags seem just wrong. Having a todo item appear, and then dissapear feels like bad UX. I really wanted to like server actions, but so far I think I will stick with server components just for rendering initial data.
@DevranDenizzz
@DevranDenizzz Жыл бұрын
Simple and direct tutorial.thanks
@rohitdalal954
@rohitdalal954 Жыл бұрын
this video is really great. thank you so much 😄🙌
@appstuff6565
@appstuff6565 Жыл бұрын
Hi ByteGrad, first time discovering you and I love the explanation you did. So simple along with theory and simple example.
@SXsoft99
@SXsoft99 Жыл бұрын
basically action controller that does only one thing, i just love the reactJS guys trying to reinvent the wheal, or at least rename it
@muratasarslan2359
@muratasarslan2359 3 ай бұрын
Nice one thanks. Can we just add a delete item functionality again using server action? Probably we need to make the list a client component. Will revalidatePath still update the page? Having issue of keeping the stale data on the page.
@anangyoga1381
@anangyoga1381 10 ай бұрын
thank you. you saved my time learning this
@VengateshDeenDayal
@VengateshDeenDayal 4 ай бұрын
Great explanation. The font looks amazing, may I know what styling framework and fonts you use?
@Milo_1010_
@Milo_1010_ 10 ай бұрын
Hello nice video, i have a question why would this form work (10:03) with JS disabled ? I am not sure to understand
@davidlin1980
@davidlin1980 10 ай бұрын
I believe it goes though the standard form post action. (I.e. form is posted to an URL, NextJS intercepts it and route it seemlessly to the server action )
@parkerrex
@parkerrex Жыл бұрын
This is money. SO happy I found this.
@roshanpaudel6352
@roshanpaudel6352 Жыл бұрын
Really great content !! Loved It. i was amazed by how much can We do using server actions.
@kevinmonaar7089
@kevinmonaar7089 Жыл бұрын
This is very helpful! Thank you.
@naman_dw
@naman_dw Жыл бұрын
I will stick with client component and shad cn forms, I think. Much cleaner and natural api. 18:00 : that lag is probably because pending state is only true while form is submitting, but then it takes some time to revalidate the cache, and during that time the pending state is false
@dutchprime1488
@dutchprime1488 Жыл бұрын
Im 10 minutes in and already learned so much
@thomasschmidt73
@thomasschmidt73 Жыл бұрын
Regarding the optimistic stuff: will it replace the Math.random() id with the actual id after the server action has finished?
@lee45283
@lee45283 Жыл бұрын
Super helpful! Thanks.
@jcbraz
@jcbraz Жыл бұрын
In your point a view, what would be the best approach to fetch data from a Client component that does not require a form? Would the /api folder still be required? Is there a better option? Thanks for the great video.
@Anthymn
@Anthymn Жыл бұрын
I would make a custom hook in the client component that has the data I need to fetch, then I can just call that hook anywhere I need that information. Not sure if this is helpful for your case.
@K.Huynh.
@K.Huynh. 6 ай бұрын
Thank you for sharing! It's very helpful to me.
@thatsJonLucas
@thatsJonLucas Жыл бұрын
Fantastic, very well mate
@codingjogo
@codingjogo 5 ай бұрын
You're saved to my note!
@coleblender
@coleblender 10 ай бұрын
Is there a way to add a revalidation tag to the todos fetch at the beginning of the video or can that only be done if you use fetch?
@ibrvimv
@ibrvimv 5 ай бұрын
Best one, thank you sir!
@RicardasSv
@RicardasSv 8 ай бұрын
It is clear and well-explained, and not a creator issue. But it will take one or two seconds. Okay, I'm done here. Thank you.
@based__ai
@based__ai Жыл бұрын
Appreciate the content -- your videos are quite good. If you're brainstorming future videos, it might be valuable to dig a layer deeper on some of the topics you covered to get at the 'why', ie, the underlying architecture driving the behaviors demo'ed. This would likely require working through the documented caching mechanisms along with, perhaps, looking at network requests in greater detail, etc. In all events, thanks again.
@DagmarJS
@DagmarJS 9 ай бұрын
Thank you for the video!
@xhwogusxh
@xhwogusxh Жыл бұрын
You are GENIUS!!! SUPER THANKS!!! God bless you!!! You're gonna be super rich!!! SUPER THANKS!!!
@backstromforsberg
@backstromforsberg 7 ай бұрын
This is so much better than the docs lmao
@codingtranquility
@codingtranquility 10 ай бұрын
Here I was hearing "server actions" and thinking "oh great, more stuff to learn to be able to do stuff I've already been doing for years". Meanwhile the autocomplete for form had me using it without even realizing what it was. Good times.
@thedigitalceo
@thedigitalceo 7 ай бұрын
Great video!
@darkcss1054
@darkcss1054 9 ай бұрын
Well, your tutorial is actually better than the one the Next.js team itself offers. It's a relief that as a React/Next newcomer, I don't have to jump through the hoops the guys on Next.js 13 tutorials I'm watching had to.
@codewithshriekdj
@codewithshriekdj Жыл бұрын
actually i already tried the server action for the company i work in but it makes startup of our application very slow, mostly whenever we try to update the code of application we had to wait for like more than 20 minutes, and also you can't use turbo there. So I Suggest that Try to get form Data with Vannilla JS With An Hidden Input of Function Name and Send that Data To single api like /api/formsubmissions where the server function run there, for getting formdata use useref or 'const formData = new FormData(document.getElementById('formId')' and send that to single '/api/formsubmissions' via fetch
@wandreperes
@wandreperes Жыл бұрын
awesome! good job! I did a project using the API directory and the handles to post/get/delete/… Also I used Prisma to database, and Zod, to validate, parse and transform the data. Client side, react hook form combined with Zod. Okay let's talk about what matters in my case! The financial institution send a webhook when the payment was approved to my API, and update the database… How to refresh the user interface in real time when the payment was approved without using a loop of requests? Websocket, okay. But in the nextjs 13 there is no a native solution for that?
@amitjohn8736
@amitjohn8736 Жыл бұрын
this is amazing i loved it. hope n your upcoming next js full stack course you explains in same way
@ByteGrad
@ByteGrad Жыл бұрын
That's the plan!
@ianc6418
@ianc6418 Жыл бұрын
very helpful! Except I can't import the experimental function like you did. I tried installing the experimental react and react-dom packages with npm, but I still get an error, and vscode doesn't seem to be able to populate it with autocomplete like yours did.
@ianc6418
@ianc6418 Жыл бұрын
I thought I replied to this, that function is no longer experimental in nextjs. they just haven't updated their docs.
@Randomuser7890
@Randomuser7890 8 ай бұрын
Great...!
@georgegeorgio70
@georgegeorgio70 Жыл бұрын
Super kontent masz! Bardzo klarownie tłumaczysz i super się to ogląda. Propsy ziomuś! :) Ps. Nie udzielasz może prywatnych korepetycji?
@ByteGrad
@ByteGrad Жыл бұрын
Thanks! Looking into private tutoring, do you have any examples of other people doing this?
@georgegeorgio70
@georgegeorgio70 Жыл бұрын
@@ByteGrad if that would be possible count me in !
@FrankyDeMeyer
@FrankyDeMeyer Жыл бұрын
Fantastic video, thanks! One big disadvantage I see with server actions, is the following: in the future I might create a mobile app, to compliment my web app. Since I currently use API routes, my mobile app will be able to use them, the back-end will be ready. If I’d now convert my web app server actions (which is tempting) I won’t have any back end at all, Isn’t that a huge issue, do you think?
@riteshsingh1
@riteshsingh1 Жыл бұрын
True, This is the only reason, I am also avoinding this right now.
@Something9008
@Something9008 Жыл бұрын
Also, if you are self hosting keeping your server and frontend separate allows you to upgrade the VPS of each independently as production usage requires.
@tc5878
@tc5878 Жыл бұрын
Exactly. The curious thing is that I don't see anyone talking about this subject. In my world, rest api that feed multiple fronts are very common!
Жыл бұрын
I tried to use revalidatePath from the API handler on PUT method - does not work. Updates only on page refresh
@adityaj21
@adityaj21 Жыл бұрын
should i dump all the api logic from route. ts to the server actions function?
@wanarchives
@wanarchives Жыл бұрын
is it same like in /app route? i thought its already server component, why still need server actions?
@Arunmurali12
@Arunmurali12 Жыл бұрын
I feel it's better to refactor the form alone to client component & perform all validations, interactivity, etc... Then create an api route to add the data... At this point the server actions part is making more work
@nick-ui
@nick-ui Жыл бұрын
Now I understand server actions, ty
@HamzahAhmad-db5cy
@HamzahAhmad-db5cy 6 ай бұрын
Is there a reason not to create a simple loading state and udpating it in the server action, rather than moving the button to a separate file and using useFormStatus over there?
@pouyaproducts2924
@pouyaproducts2924 5 ай бұрын
nice and simple 👍
@sivadhanushuppalapati4041
@sivadhanushuppalapati4041 Жыл бұрын
please tell me What is the vS Code theme you are using
@appstuff6565
@appstuff6565 Жыл бұрын
Im stuck at around @6:00 after doing the use server component, it gives me an error : Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server"....i take it to the top but still error persist.
@appstuff6565
@appstuff6565 Жыл бұрын
the moment i click the add to do button the error happens. Do you know what i am missing?
@appstuff6565
@appstuff6565 Жыл бұрын
The button worked. just needed to add it in separate component.
@SEOPro
@SEOPro 9 ай бұрын
Can we server actions pass data between components? for eg: if add to do is in one component and display form is part of another component.
@joerodrigo9661
@joerodrigo9661 Жыл бұрын
hi grad, what do you recommend partner for nextjs like for the backend? do you recommend like next + nest,prisma postgres? smtng like that.
@ByteGrad
@ByteGrad Жыл бұрын
I would just try to stay within the Next.js system. Yes, I'd use Prisma and any of the popular databases are fine. Should be pretty easy to refactor it out into a separate backend once Next.js is too restrictive.
@guivasconcelos21
@guivasconcelos21 Жыл бұрын
I wonder how it'd look like if you had another action to mutate the list in the same component. For instance, a delete or toggle todo. Would it be 2 different useOptimistic calls?
@pikelele
@pikelele 9 ай бұрын
great tut
@cubeunicorn4055
@cubeunicorn4055 Жыл бұрын
He boy, you tutorials are very helpful. Appreciate your work. When the react course will launch? Any date?
@ByteGrad
@ByteGrad Жыл бұрын
Very soon, make sure you’re on the email list :)
@cubeunicorn4055
@cubeunicorn4055 Жыл бұрын
@@ByteGrad can you please give me a approximate time?
@ByteGrad
@ByteGrad Жыл бұрын
1-2 months at most
@asadmehboob1300
@asadmehboob1300 Жыл бұрын
Please use react hook form with zod and Tanstack table
@mamlzy
@mamlzy Жыл бұрын
​@@ByteGradyes react-hook-form and zod gonna be awesome🔥
@zainyzain6471
@zainyzain6471 Жыл бұрын
we could use these server actions to api call like fetch text images and numeric data with out using api routes ?
@sealuke2724
@sealuke2724 Жыл бұрын
super useful!!!
@ktrifon
@ktrifon 7 ай бұрын
What if this form was a search form and below you wanted to see filtered ToDos? In this case, the server action should return data based on the search criteria but how do you return this data? The component with the todos should not fill by a full db search now, it should fill with the results of the sever action. You have to use the search term from the form. I am missing something here and I cannot do it (for the moment). Also, I am not sure any more which component should be a server component and which one should be a client component. Is my approach wrong? Are server actions only for mutations? Any suggestions? (All the videos show server actions mutating data. I want just a search) Thanks...
@tigana
@tigana 7 ай бұрын
Off topic but Prisma has been a complete game changer.
@GabrielLogan17
@GabrielLogan17 6 ай бұрын
In several videos you say that when we import a server component into a client component, it becomes a client too, why doesn't this happen in the case of server actions? 😢
@leebobtheblob87
@leebobtheblob87 Жыл бұрын
13:50 action attr with callback doesnt work outside next js
@ivanmendoza6575
@ivanmendoza6575 2 ай бұрын
What autocomplete plugin do you use?
@andresmontero7481
@andresmontero7481 Жыл бұрын
Amazing!! Great videos man. This may be a dumb question.. But let's say I want to pass in data that's not typed on an input tag, perhaps a Date from a calendar component. Could you add it as a prop to the addTodo action?
@AndrewAkaHrun
@AndrewAkaHrun Жыл бұрын
I bet you can modify your formdata at your will before invoking the server action.
@appstuff6565
@appstuff6565 Жыл бұрын
useFormStatus minute doubt: Hey thanks for this, im just using a action = "/auth/sign-in" and rest all is same. But i do not get the "adding" state. what should i do?
@nisabmohd
@nisabmohd Жыл бұрын
But when you use client components and make api call then when api responds success we just need to add that new data to state, where as in server components we are making a api kindof call and refetching the data that means an extra db query
@hongz1
@hongz1 Жыл бұрын
nice clip. little bit hard to follow fast screen moving and talking.... Question. I noticed that they removed a word, "alpha" in serverActions documentation (but still under experimental). Do you know when it is going to be started officially?
@jason.zubiate
@jason.zubiate 7 ай бұрын
would useOptimistic still work if part of your form data is an image /videobeing uploaded to s3?
@Eventyret
@Eventyret Жыл бұрын
Great video good explanation 🎉 What's the react extension you use or snippet for creating components like that? Also what's the Mac app you use to show the app icon when moving apps. Thank you again ❤
@tek9ine130
@tek9ine130 Жыл бұрын
The extension is React Snippets. The icons that show up when resizing the windows is a Windows 11 feature, he's not on Mac I believe.
@codeyalaya
@codeyalaya 9 ай бұрын
how to show #contact section of a long page, after submitting form using server actions with js disabled. #contact section is at last of the page.
The 3 REAL benefits of Next.js Server Actions
12:11
ByteGrad
Рет қаралды 31 М.
Леон киллер и Оля Полякова 😹
00:42
Канал Смеха
Рет қаралды 4,7 МЛН
Fetching Data Doesn't Get Better Than This
6:58
Josh tried coding
Рет қаралды 139 М.
10 common mistakes with the Next.js App Router
20:37
Vercel
Рет қаралды 235 М.
Forms with React 19 and Next.js
9:13
leerob
Рет қаралды 24 М.
Why I don't use React-Query and tRPC in Next.js
18:58
ByteGrad
Рет қаралды 99 М.
The Problem with React Server Actions
9:45
Josh tried coding
Рет қаралды 23 М.
8 Rules For Learning to Code in 2025...and should you?
12:59
Travis Media
Рет қаралды 48 М.
Леон киллер и Оля Полякова 😹
00:42
Канал Смеха
Рет қаралды 4,7 МЛН