Next.js Server Actions (revalidatePath, useFormStatus & useOptimistic)
ฝัง
- เผยแพร่เมื่อ 15 ก.ค. 2024
- 👉 NEW React & Next.js Course: bytegrad.com/courses/professi...
Hi, I'm Wesley. I'm a brand ambassador for Kinde (paid sponsorship).
👉 Add auth to your app FAST: bit.ly/3QOe1Bh
👉 NEW React & Next.js Course: bytegrad.com/courses/professi...
👉 Professional JavaScript Course: bytegrad.com/courses/professi...
👉 Professional CSS Course: bytegrad.com/courses/professi...
👉 Discord: all my courses have a private Discord where I actively participate
🔔 Email newsletter (BIG update soon): email.bytegrad.com
⏱️ Timestamps:
0:00 Fetching data in server components
0:58 Traditional data mutations
2:54 Server actions for mutations
6:37 Revalidating data
8:08 Under the hood
9:28 2 Other Benefits
10:31 Server Action in client component
13:20 Reset form
15:44 Downside of client components
16:06 useFormStatus (pending state)
18:20 Error handling
19:55 useOptimistic (optimistic UI)
26:29 formAction
27:10 Server Actions outside form
#webdevelopment #programming #coding
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
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!
I can totally see the vision, but oh man it's a lot of concepts building on top of each other.
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!
this is amazing !!!!!!!!!!!! i searched so much to know these and u just have them all in the best way ever
Thank you for clear and quick delivery, you are very nice teacher
Great info presented here. Thank you. Nuxt misses this feature.
Hi ByteGrad, first time discovering you and I love the explanation you did. So simple along with theory and simple example.
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.
Your tutorials are awesome. Everything is crystal clear ... 😍😍
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!
You explain really smooth, fast, useful and accurate
I really enjoy and learn many things
Outstanding explanation. Your effort is really appreciated. Thanks man!
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.
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.
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.
THANK YOU SO MUCH WITH THE CLENT COMPOENT!
Your amazing. I learned few new things. I always watch your video when i get free time. Keep going. Take love from Bangladesh ❤️🇧🇩
epitome of clear explanation
Thank you for the video!
Six words to support the channel
Very underrated channel, dude
Love your content!!
Thank you for sharing! It's very helpful to me.
Simple and direct tutorial.thanks
This is very helpful! Thank you.
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 )
Really great content !! Loved It. i was amazed by how much can We do using server actions.
Super helpful! Thanks.
thank you. you saved my time learning this
Love your content! It's my favourite 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.
This made me feel better about my slow websites lol
True. I was thinking that when he used it.
Great video!
You're saved to my note!
this video is really great. thank you so much 😄🙌
Best one, thank you sir!
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.
Fantastic, very well mate
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.
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 ✅
great tut
Now I understand server actions, ty
This is money. SO happy I found this.
Great video thank you
basically action controller that does only one thing, i just love the reactJS guys trying to reinvent the wheal, or at least rename it
its a fantastic video thank you
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?
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.
super useful!!!
Your videos are truly helpful, I hope this comment encourages you to not stop educating us(me) anytime soon
Thanks a lot !
Happy to follow you
Thanks!
Awesome Tutorial very helpful for me
Thanks, appreciate it!
nice and simple 👍
You are GENIUS!!! SUPER THANKS!!! God bless you!!! You're gonna be super rich!!! SUPER THANKS!!!
funnily enough there are not many videos explaining recent nextjs although it's a popular framework / meta framework
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.
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)
this is amazing i loved it. hope n your upcoming next js full stack course you explains in same way
That's the plan!
This is so much better than the docs lmao
Im 10 minutes in and already learned so much
Great...!
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.
Off topic but Prisma has been a complete game changer.
super cool
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!
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
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 !
hope u can make a video about redux, great explanations btw.😁
Si much value
With many videos I have been totally agree, even keeping on mind your tips; however, not with this. This is one of the first reasons I started to leave PHP World, to work over monoliths is so hard to keep clean and handleable
Regarding the optimistic stuff: will it replace the Math.random() id with the actual id after the server action has finished?
if you could zoom out on your code a little more it be really helpful. great video and topic
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?
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.
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.
great content! the constant screen resizing is a bit annoying, however :) i'm watching in 2x so that's likely is part of it (i.e. higher frequency)
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
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?
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 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.
should i dump all the api logic from route. ts to the server actions function?
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
we could use these server actions to api call like fetch text images and numeric data with out using api routes ?
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🔥
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.
would useOptimistic still work if part of your form data is an image /videobeing uploaded to s3?
please tell me What is the vS Code theme you are using
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.
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!
Somehow I got these PHP vibes while watching this
Please do a video on React Hook Form Implementation with Server Actions In NextJs 13.5
will these work in client components as well?
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?
I tried to use revalidatePath from the API handler on PUT method - does not work. Updates only on page refresh
Just discovered your channel, thanks so much, each one i have seen is excellent.... i have a question, how do you authorize a user to use the actions? ie clerk auth?
Thanks 👍 It’s a great question. I might make a separate video on this soon
@@ByteGrad I would certainly appreciate the video.... in the meantime.....
even following clerk docs.. i still get unauthorized...:(
what do you mean unauthorized? if the session is active, your protected routes should be accessible (configured on the middleware file)
all i can say is wow.
is it same like in /app route? i thought its already server component, why still need server actions?
what theme do you have installed in VScode?
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?
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