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

Показать описание

Hi, I'm Wesley. I'm a brand ambassador for Kinde (paid sponsorship).

👉 Discord: all my courses have a private Discord where I actively participate

⏱️ 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

Рекомендации по теме

Комментарии

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

ricardourbieta

quite ironically I was learning next using a to do list app and then boom I land on this, I love you man!

techug

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 Youtube dev space

filipesommer

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!!!

robertodelgado

I can totally see the vision, but oh man it's a lot of concepts building on top of each other.

edhahaz

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!

dallinromney

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...🤝

stevemitto

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.

appstuff

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 🙌

chukwuemekamusic

Your tutorials are awesome. Everything is crystal clear ... 😍😍

sahaneakanayaka

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!

rawnato

This is the best explanation by far of server actions. thanks!

jeffreygarcia

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.

hyper_channel

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.

darkcss

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.

markorral