Next.js Server Actions (revalidatePath, useFormStatus & useOptimistic)
HTML-код
- Опубликовано: 13 июн 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!
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 RUclips dev space
exactly
I have noticed quite a few RUclipsrs are starting to show real world errors and not just when things go smooth. Helps newbies learn to troubleshoot.
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.
Hi ByteGrad, first time discovering you and I love the explanation you did. So simple along with theory and simple example.
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
Your tutorials are awesome. Everything is crystal clear ... 😍😍
Thank you for clear and quick delivery, you are very nice teacher
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
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 so much better than the docs lmao
Great info presented here. Thank you. Nuxt misses this feature.
Thank you for sharing! It's very helpful to me.
Six words to support the channel
I can totally see the vision, but oh man it's a lot of concepts building on top of each other.
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
Simple and direct tutorial.thanks
THANK YOU SO MUCH WITH THE CLENT COMPOENT!
Really great content !! Loved It. i was amazed by how much can We do using server actions.
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.
Very underrated channel, dude
Love your content!!
thank you. you saved my time learning this
Off topic but Prisma has been a complete game changer.
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 )
Love your content! It's my favourite channel. ❤
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 ✅
This is very helpful! Thank you.
this video is really great. thank you so much 😄🙌
Thank you for the video!
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.
Your videos are truly helpful, I hope this comment encourages you to not stop educating us(me) anytime soon
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.
This is money. SO happy I found this.
Super helpful! Thanks.
Now I understand server actions, ty
Great video!
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.
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.
Fantastic, very well mate
Im 10 minutes in and already learned so much
basically action controller that does only one thing, i just love the reactJS guys trying to reinvent the wheal, or at least rename it
this is amazing i loved it. hope n your upcoming next js full stack course you explains in same way
That's the plan!
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?
Thanks!
Awesome Tutorial very helpful for me
Thanks, appreciate it!
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?
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!
Regarding the optimistic stuff: will it replace the Math.random() id with the actual id after the server action has finished?
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? 😢
Great video thank you
its a fantastic video thank you
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 !
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)
super useful!!!
should i dump all the api logic from route. ts to the server actions function?
great tut
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...!
Happy to follow you
You are GENIUS!!! SUPER THANKS!!! God bless you!!! You're gonna be super rich!!! SUPER 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.
we could use these server actions to api call like fetch text images and numeric data with out using api routes ?
Thanks a lot !
please tell me What is the vS Code theme you are using
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
is it same like in /app route? i thought its already server component, why still need server actions?
hope u can make a video about redux, great explanations btw.😁
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?
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
will these work in client components as well?
would useOptimistic still work if part of your form data is an image /videobeing uploaded to s3?
I tried to use revalidatePath from the API handler on PUT method - does not work. Updates only on page refresh
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)
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...
what theme do you have installed in VScode?
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.
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.
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
Does anyone know if and how can we use useOptimistic for deleting items too? Like if I add a delete button in front of each of the items I want to quickly show the list with removed item
Do you have links to your code? It'd be nice to experiment with it to see if it still works.. i've studied so many tutorials from other yioutubers that didn't work because they used an element that was out of date before i found them.
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?
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?
But what about client-side validation with zod for example?
if you could zoom out on your code a little more it be really helpful. great video and topic
I have a form where I have "formsteps" (with values for type, name, placeholder etc) mapped out into inputs with dynamic values. This does not appear to work with the whole server action and FormData thing. If I just have a regular input that isnt mapped out, it works just fine. Has anyone encountered and solved this problem?
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.
super cool
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🔥
What about form validations? Like using zod?
So if I am using server actions, can I just call env variables like process.env.VAR or does that have some trick up it's sleeve as well.
anyways, they are just redefining web dev. Not sure if it's a good thing or a bad thing. Feels like more ease for the developer but compromise on performance.
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!
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)
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
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.
When you added the data the pending state went true, when it added the data in db, the pending state went false, but why didnt it update the UI? Because, it had to fetch the latest data again and only after that it updated the UI. So that lag was due to the second DB Query. This pattern is not very optimized. We have to make another DB query to fetch the latest Data from DB.
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