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.
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
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 TH-cam dev space
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!
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!!!
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 🙌
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.
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!
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.
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.
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...🤝
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 ✅
Regarding useTransition: The only benefit I've noticed is that isPending will give you a loading state that stay true *until revalidation has finished*
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 )
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)
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.
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.
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 )
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
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.
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.
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.
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.
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.
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
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?
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.
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?
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.
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
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?
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.
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.
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?
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...
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? 😢
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?
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?
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
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?
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 ❤
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.
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
Can you make short video, when to use actions and when api route, and why... pls
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
Glad it was helpful!
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 TH-cam dev space
exactly
I have noticed quite a few TH-camrs are starting to show real world errors and not just when things go smooth. Helps newbies learn to troubleshoot.
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!
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!!!
same here.
quite ironically I was learning next using a to do list app and then boom I land on this, I love you man!
Thanks!
Awesome Tutorial very helpful for me
Thanks, appreciate it!
I can totally see the vision, but oh man it's a lot of concepts building on top of each other.
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 🙌
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.
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!
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.
Your tutorials are awesome. Everything is crystal clear ... 😍😍
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.
This made me feel better about my slow websites lol
True. I was thinking that when he used it.
Thank you for clear and quick delivery, you are very nice teacher
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...🤝
This is the best explanation by far of server actions. thanks!
this is amazing !!!!!!!!!!!! i searched so much to know these and u just have them all in the best way ever
Your amazing. I learned few new things. I always watch your video when i get free time. Keep going. Take love from Bangladesh ❤️🇧🇩
Six words to support the channel
Outstanding explanation. Your effort is really appreciated. Thanks man!
Your videos are truly helpful, I hope this comment encourages you to not stop educating us(me) anytime soon
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 ✅
Regarding useTransition: The only benefit I've noticed is that isPending will give you a loading state that stay true *until revalidation has finished*
Ah makes sense!
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 )
epitome of clear explanation
super straightforward and useful thank you so much!
As this video best describes to your channel name and it is very much helpful to understand the byte level concept of the NextJS 👌
My gosh... your explanation... Absolutely amazing ❤
Love your content! It's my favourite channel. ❤
Great info presented here. Thank you. Nuxt misses this feature.
Very underrated channel, dude
Love your content!!
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
THANK YOU SO MUCH WITH THE CLENT COMPOENT!
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)
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.
Simple and direct tutorial.thanks
this video is really great. thank you so much 😄🙌
Hi ByteGrad, first time discovering you and I love the explanation you did. So simple along with theory and simple example.
basically action controller that does only one thing, i just love the reactJS guys trying to reinvent the wheal, or at least rename it
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.
thank you. you saved my time learning this
Great explanation. The font looks amazing, may I know what styling framework and fonts you use?
Hello nice video, i have a question why would this form work (10:03) with JS disabled ? I am not sure to understand
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 )
This is money. SO happy I found this.
Really great content !! Loved It. i was amazed by how much can We do using server actions.
This is very helpful! Thank you.
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
Im 10 minutes in and already learned so much
Regarding the optimistic stuff: will it replace the Math.random() id with the actual id after the server action has finished?
Super helpful! Thanks.
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.
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.
Thank you for sharing! It's very helpful to me.
Fantastic, very well mate
You're saved to my note!
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?
Best one, thank you sir!
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.
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.
Thank you for the video!
You are GENIUS!!! SUPER THANKS!!! God bless you!!! You're gonna be super rich!!! SUPER THANKS!!!
This is so much better than the docs lmao
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.
Great video!
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.
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
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?
this is amazing i loved it. hope n your upcoming next js full stack course you explains in same way
That's the plan!
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.
I thought I replied to this, that function is no longer experimental in nextjs. they just haven't updated their docs.
Great...!
Super kontent masz! Bardzo klarownie tłumaczysz i super się to ogląda. Propsy ziomuś! :)
Ps. Nie udzielasz może prywatnych korepetycji?
Thanks! Looking into private tutoring, do you have any examples of other people doing this?
@@ByteGrad if that would be possible count me in !
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?
True, This is the only reason, I am also avoinding this right now.
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.
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
should i dump all the api logic from route. ts to the server actions function?
is it same like in /app route? i thought its already server component, why still need server actions?
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
Now I understand server actions, ty
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?
nice and simple 👍
please tell me What is the vS Code theme you are using
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.
the moment i click the add to do button the error happens. Do you know what i am missing?
The button worked. just needed to add it in separate component.
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.
hi grad, what do you recommend partner for nextjs like for the backend? do you recommend like next + nest,prisma postgres? smtng like that.
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.
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?
great tut
He boy, you tutorials are very helpful.
Appreciate your work.
When the react course will launch? Any date?
Very soon, make sure you’re on the email list :)
@@ByteGrad can you please give me a approximate time?
1-2 months at most
Please use react hook form with zod and Tanstack table
@@ByteGradyes react-hook-form and zod gonna be awesome🔥
we could use these server actions to api call like fetch text images and numeric data with out using api routes ?
super useful!!!
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...
Off topic but Prisma has been a complete game changer.
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? 😢
13:50 action attr with callback doesnt work outside next js
What autocomplete plugin do you use?
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?
I bet you can modify your formdata at your will before invoking the server action.
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?
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
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?
would useOptimistic still work if part of your form data is an image /videobeing uploaded to s3?
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 ❤
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.
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.