The 3 REAL benefits of Next.js Server Actions

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 Old way
2:04 New way
3:08 API route
4:10 First benefit: Server Action
6:00 Under the hood
6:57 Second benefit: useFormStatus & useOptimistic
9:44 Third benefit: Progressive enhancement

#webdevelopment #programming #coding .
.

[TheGrandChieftain]

Server actions might make the actual request simpler, but React Query seems a lot better for managing the state of your fetch requests.

[dopetag]

This is the second video I have watched on this channel and I am already in love. The explanations are really clear and on point. Top level content!

[psyferinc.]

your doing well man. im glad you joined the scene

[saidibra]

can you please make a video between Next.js and Express.js and which one to choose in the back-end and the benefits and cons of each one

[jorden]

Thanks for your video and explanation!
From a DevOps perspective... you are creating a monolith application, which you can not scale the front and the back separately, I guess this is the biggest downside. The other big downside is that you can not use multiple clients (front-ends) and using the same server (back-end).

[phsopher]

Helpful explanation thanks! Does this only work for forms? Suppose I just want to have a single button that does something, e.g., liking a comment on a social media site. Should I go through the whole process of wrapping it in a form, then making the button a separate child component etc. Seems easier to just make an api endpoint and call it on onClick. Or is there a more Nextonic (a word I just made up) way?

[matthiasmatanda]

Thank you sir for this short video with very important information that I needed to hear.

[martg]

very interesting! clear explanation 👏 Would this apply for a datagrid too?

[spas.z.spasov]

Hello, thank you for the tutorials. What I'm searching for for complex form validation - i.e. a tutorial that puts together the 1) server actions + 2) react-hook-form + 3) zod.

[koolam]

other than less boilerplate codes, more hooks available, is there some performance-wise benefits server actions have over api routes?

still not really convinced yet but using POST all the time

[cengizturk]

This is exactly what I was looking for. Thanks.

[JasonWongFing]

Thanks for your video and explanation! It's helpful to me!

[satyak]

Can you rate limit server acrions like api ? 😊

[dawid_dahl]

Subscribed to this channel so hard! 👌🏻

[AnkitSharma-muoj]

In previous video you told importing something inside "use client" component then whatever is imported also runs on client side ?

[alvaro]

So on the surface it may seem simpler but in practice it still makes the same number of network trips and now you have to deal with NextJS and having client vs server components. BTW, you can easily abstract away the fetch calls inside utility classes (eg, api.todos.add(value)). It's a nice way to separate the concerns.

[alexnelson]

I've really been enjoying server actions. Nice not to have to make an api route. One thing I found out recently that's a bit annoying with respect to form data is there are no actual boolean type values you can get from HTML forms. Checkboxes only have 'on' when checked and no value at all if unchecked. Also, input forms always have string values when you get their value from formData, never a number, even if the input is type=number. Of course you can always do a combo of state and server actions.

[baliramgiri]

what if we have server in node and from there, we are storing cookies to browser and using in server components, so I am not possible
get access of cookies to node server. is there any way?

[appstuff]

can we use server actions for sign in, currently using action='/auth/sign-in' with method = 'post' where my sign-in route.ts in in app/auth/sign-in/route.ts?

[brancode]

When are you releasing you Next Js course?