I Fixed Next.js Server Actions

Next.js Server Actions have been a long time coming, so happy we can finally talk about them!
Check out zact: github.com/pingdotgg/zact
ALL MY VIDEOS ARE POSTED EARLY ON PATREON / t3dotgg
Everything else (Twitch, Twitter, Discord & my blog): t3.gg/links
S/O Ph4seOne for the awesome edit 🙏

[@samuelgunter]

I think you mean "I awaited" since you had to Promise not to talk about it until later

[@t3dotgg]

god dammit sam

[@debarkamondal6406]

I laughed so hard that my tummy is hurtin'

[@austincodes]

This comment wins all of the comments

[@kohelet910]

😂

[@DullJoker]

Brother thats just criminally funny😂

[@ofadiman]

I can't wait to start leaking my secrets with server actions 💪

[@ClaudioBrogliato]

If leaking action sounds awful is because it probably is.

[@jtms1200]

I wonder what process.env would look like encoded into a form?

[@RandomMcLain]

I feel like NextJS (and the entire JS ecosystem) has made huge advancements in recent months, and I can't keep up with the pace of learning. I used to consider myself a developer with a strong understanding of TS and NextJS. Despite understanding and getting excited about the new developments, I feel like a junior developer again, like I know less and less every day. Is anyone else experiencing the same thing? Thanks a LOT, Theo!

[@outis99]

I feel like they're not that many changes as far as Next is concerned, if you just build just a little crud app with the App router, it should be more than enough to learn it, also I would suggest to not bother with something if it's not stable yet

[@supalarry1009]

I feel you bro

[@reitznerdomenik]

Looks nice. Good to see that Next is now also using form actions 😊 Personally I like the cleaner separation in SvelteKit into different files. This makes leaking private stuff accidentally way harder.

[@FlorinPop]

One of the best explanations on server actions! Thanks Theo

[@psyferinc.3573]

im loving this style of videos. your updates on the tech space are magical

[@VincentFulco]

Your topic matter and way of describing things is outstanding. Even if over my head sometimes as a consummate noob/intermediate in next.js. Really appreciate the great work.

[@haaxor1689]

I'd love to see trpc/query thing that would just work right out of the gate with async components. How cool would it be to have "useQuery" just like in normal tanstack with all the functionality, but you would be able to "await" it in async component to get the initial value for SSR. Only then I'll really transition from trpc to server components.

[@scott2181]

Useful. Reminds me a lot of getting to grips with SvelteKit's separation of server actions. I appreciate the cleaner file-level separation.

[@ayabochman5453]

You should have more subscribers! This content is so valuable, I've been wrapping my head around server actions and all of these new Next 13.4 stuff. This video really cleared it up for me, thank you!

[@RolandAyala]

Cool. Thank you for this. Breaking out actions into a separate file is delightfully clean & easy, and provides nice separation as well.

[@Dev-Siri]

Never ask a woman her age, A man his salary, And Remix what happened to server actions

[@squrler]

😬😬😬

[@darren_baldwin]

Remix server actions actualy work and are a much better API than whatever the heck nextjs launched here

[@TomNook.]

amazing

[@ralexand56]

@@darren_baldwin why

[@Javislaterlp]

Damn this is a really great explanation of the closures issue. I was following and interacting on the twitter thread but I couldn't grasp my mind about why would it matter at all. I now see it's because of these hidden form inputs that are created. Thank you so much! you should REALLY make a simple tweet about this, because I had never read about these form inputs in all the Twitter discussions.

[@mharley3791]

When things settle down more can you do another video on when you would use server actions? I definitely see there use in quickly pro typing but not sure how they would scale with a complex project. Traditionally, creating separate api endpoints could be tedious but it allowed separation of concerns and the ability to swap out clients easily

[@FranFiori94]

Doesn't look intuitive at all. I don't like that you can have a use server function inside the component, for me it makes more sense that it has to be defined outside of it or in another file like you did

[@Xe054]

This is the direction that sveltekit is taking, separating server and client code into folders instead of colocating them in the same file.

[@rubendacostaesilva8442]

That's how I'm going to do it too, server and client code in different files.

[@elteyabhassan4030]

it just Php Way

[@LuKaSSthEBosS]

in search of simplicity things are getting unbearably complicated..

[@ccsmp]

Great video, thanks Theo! Zact made things more React like but server actions still reminding me the early 2000's. Think we're starting to improve things instead of creating new ones.

[@TheAriznPremium]

Is it stil reactQuery for loading dynamic data on client? If so how would i make that typesafe until trpc "works" with next 13

[@jacobgad1]

Im excited to adopt these patterns, but how would these patterns work with expo and t3-turbo?

[@MrMagooRC]

As a mostly backend dev who's loving playing with Nextjs and React, Server Actions are going to be super cool. As a super old dev (from before the days of web apps, or the WWW at all)... the ease in which serverside secrets can ooze into the client, and the invisibility of it to the developer, scares the crap outta me lol. I don't see it as an 'edge case', in my experience, it will happen and probably quite a lot. I spent too many years playing vulnerability whack-a-mole back in the day to want to see it come back again, even if it is as a result of one of the coolest things I've seen in a long time. I'm utterly convinced that the team and community will get on top of this... but right now it's a definite 'alpha, handle with care' in my book.

[@timhilt1185]

I would love to hear your take on Remix vs. NextJS, especially now that server actions exist. Why do you choose NextJS over Remix?

[@riolly]

Is this trpc & react query equivalent on the server component? So we don't need them now?

[@johnmcparland3277]

The React and Next teams need to be verrrrry careful with this level of colocation. they might inadvertently open up the worst kinds of footguns where novice devs can easily embed secrets in components without meaning to. Even theo had to reconsider his mental model of what code is executed where.

[@ilscutta]

How do protected endpoints work ? How do you include the Authorization header and do you have to the authentication check manually in every action or is there some kind of middleware ?

[@ralexand56]

couldn't you just pass that header as param in your function?

[@UbblyMaster]

Theo, the problem there is that if you have a variable on the component level, it's going to pass it to the client, but when you have that variable at the server level only (inside the function) it doesn't show it.

[@pankudev]

I was iffy about server actions and how black magic they felt, but your video really helped. Thanks Theo keep up the good work.

[@hunterbertoson156]

PHP been doing this forever.

[@dmitrii_zolotuhin]

Looks very nice. But am I missing something or no one mention client side validation?

[@codinginflow]

Really useful breakdown

[@FourLeafGroverRL]

When you submit a form with a file input how do you grab the file in the FormData when using actions? All of their examples are simple forms and not ones that contain files. Since it shoved all the form info in the FormData for you, how do you access the file, since usually it’s e.target.files[0] if you were doing it normally. But now you would say FormData.get(“input name”)

[@RyanTipps]

are static pages still CDN cached? or do they have to hit the server?

[@ronanru]

The main problem with the first example is that any user can just change the path in devtools and break your server. It looks like ok code, but introduces a vulnerability

[@shaunfitzgibbon]

are you using tmux on the terminal ? what theme is that ?

[@justpatrick_]

This is going to be another react concept with a million gotchas and your doing it wrong. Expect many articles and videos explaining how to properly use it and core members constantly trying to help devs think the react way.

[@rstudner]

How does this compare to remix's action handler? Seems very similar

[@nofaldiatmam8905]

hey theo is there going to be any update on trpc so its compatible on the new app router? i’ve been looking pr about it in t3. just want to know it from u 😊

[@ralexand56]

do you really need it with the new app router model?

[@theuidawg3274]

Thanks for showing how server actions affect the rendered html. Not personally a fan of the implicit binding of variables to forms, especially when it seems like it could've been made an explicit relationship (just by returning the input in the html). It seems like this could also break your form submissions by automatically including unwanted variables. Not a unique opinion these days, but I feel like the mental overhead of managing next.js is growing out of hand. I enjoy staying up to date with this stuff, but a lot of devs don't share the same enthusiasm. A lot of my coworkers are dreading upgrading to the new app router with all the changes it's bringing. It's cool to see so many advancements, but it is also kinda overwhelming. Sorry for the wall of text 😅

[@Something9008]

When you factor in the added cognitive overhead , security gotchas and the black box nature of Vercel's backend runtime in production I don't see how this is better than sending a post request. Does it save a lot of boilerplate?

[@ralexand56]

you don't have to create a api route to accomplish adding objects to a database

[@muhaimincs]

Can’t wait for create-t3-app be updated with pack organized server actions

[@yiannis_p]

I would really miss trpc though. The power to infer output types from procedures it so nice. Awesome video like always!

[@darren_baldwin]

You wont need tRPC now because ur writing ur backend code in ur frontend code -- so everything is typesafe by default

[@thirdvect0r]

Yeah I think you may have missed that by using zod/zact you can ensure type safety in the same infer'd way

[@yiannis_p]

I realise all this. My point was that trpc could take your return value from a query and make it a type automatically

[@abdulrahmanagboolaosho3582]

How do you use trpc in the app router?

[@tim_from_braid]

Next js is becoming a mess

[@maddsua]

Yes, it has a ton of cool features but it's raw as f

[@JLarky]

How do you read cookies and middleware?

[@hiddenLadder]

do these actions need to be authorized?

[@jonathangamble]

Doesn't declaring a variable outside a function on the server make it a global?

[@smithshelke2036]

Theo’s shirt never fails to impress me hahaha. Not everybody can bang this outfit hahah

[@arpitdubey5938]

Is NextJS becoming the new PHP?

[@lucasdepaula9744]

I watched several videos about this new server actions thing and none of them show me a great example of real use case. If you have a good example please tell me (and please dont tell me that you guys are thinking in connecting to a db with this).

[@Andrei_Calazans]

Actions are awesome. Feels very native to React. Incredible how Twitter has focused on the closure gotcha

[@Candyapplebone]

Twitter focused on the closure gotcha? Huh? Can you catch me up?

[@Andrei_Calazans]

@@Candyapplebone Theo touches on this point around here kzbin.info/www/bejne/b4jZe3elp5qorNE The gotcha is when you pass something to the server action function through scope in the component the scoped value will leak to the client.

[@joshuaborseth]

Love the shirt :)

[@dogagenc8654]

I get excited when NextJS or React team has a new stuff until i see how they decided to implement feature. I created projects using React more than Svelte but after i switched to Svelte, everything just went better and it feels like i'm not walking on a thin ice. SvelteKit server actions is here for months and the implementation is way way better imho.

[@weirddev]

I feel like migrating from trpc to only next and server actions now

[@ryanschwartz3340]

best hairstyle so far

[@drtux7210]

The fact that client constants are included as a hidden input in the form is quite frightening. Smells like easy RCE. I hope to be wrong

[@jtms1200]

Is this a core part of the new FootGun stack? I see a future with lots of missing toes...

[@rb3694]

So glad I watched this I didn't even consider this

[@BlurryBit]

2:17 I personally don’t think that’s wrong. You are defining use server inside the function scope. So, that’s where your calls and definitions should belong. I wouldn’t make a global const that I don’t want in the client, anyway.

[@pixelotetm]

Anyone knows some Remix KZbinr to recomend me ? i want to know more about remix

[@louispetrik7431]

I can't replicate this at the moment, did they fix this?

[@schmellmafeet]

Like Sveltekit?

[@zhongtom2625]

We should always do validation before posting the request. This server action examples has only demonstration values but cannot be used in real life.

[@PedroSanchez-od7cc]

This video deserves more than one like, but I can only hit the button once 😢

[@versaleyoutubevanced8647]

Is this the first time Javascript is having server mutations in his history?

[@axios7776]

People: We want stuff to work out of the box! Things: Working out of the box Also People: 😲

[@greendsnow]

I'm 100% sure they are going to ship it with some broken gotcha, like useEffect

[@UbuntuBanksie]

LOL the subscribe error

[@vvarhand3985]

WHAT A NICE SHIRT OMG

[@p1erceprc]

what color scheme is this?

[@GratuityMedia]

poimandres

[@AdetayoAkinsanya]

Nextjs is really moving fast

[@thekwoka4707]

You said no js ran on the client, but the screen didn't refresh. Surely that requires that there was js running on the client, right? It's just nextjs server actions handling.

[@t3dotgg]

On the form stuff it refreshed, that's why my input awkwardly disappeared

[@blessdarah1256]

So it means Remix was right from the beginning.

[@psyferinc.3573]

haha the zod error killed me

[@DunckingTest]

It seems that Vercel is aiming to eliminate the distinction between backend and frontend by incorporating both into a single full stack through the integration of React server components and server actions. However, I cannot be certain of this.

[@t3dotgg]

Not quite. They're trying to help you apply the "right compute for the job". Global edge if that makes sense. Regional edge if it doesn't. Lambda if you need Node. User device otherwise. Different work requires different types of compute. Vercel's one of few providers that doesn't pretend one solution solves all problems

[@MattChinander]

Please use a dark page background color next time. Going from dark editor to bright white browser hurts.

[@coffee-is-power]

PLS some one stop server components

[@Dev-Siri]

why

[@coffee-is-power]

@@Dev-Siri they make your APP one giant blob and couples your server with your client and you cant even make a mobile APP or an alternative frontend without rewriting your entire backend

[@Dev-Siri]

​@@coffee-is-power Idk what you mean by "one giant blob". If you think server components make an app "one giant blob", then it can be said that every Next app despite their version is a giant Blob since fundamentally they don't change the way your app is structured. (It is up to you, you decide what is Server & What is client) Server Components do not necessarily couple client and server, they just don't send the JS for the Server Components. If you are doing SSG for example, the HTML will be generated at build time and the JS for the Server Components will never be shipped to the client. It does essentially does the same thing as Next 12 and previous versions but after rendering it on the server/build time, it just doesn't give you JS for the Server Components. The HTML stays the same, the server stays the same & the client only receives the JS for the interactive components + React runtime (50kb). If you mean "cant make a mobile app" as in "cant make a offline mobile app" then that !== true. As I said, Server Components aren't some magical abstraction that constantly keeps your Server & Client tied together, they are just Components that are only there when the Server Generates/Prerenders the Page. Now you also mentioned "X can't be made without Rewriting your entire backend". I don't really understand this "Rewriting entire backend" thing since your backend uses server-side APIs and Server Components are also backend-only. Can you explain what did you mean by it?

[@lvidakovic]

Wait, you talk about alpha, but they are production ready for a quite some time 🤔. So if a next major release happens in 2024 it can probably be safely used in 2026

[@lvidakovic]

btw why refer to it as alpha when they state it's ready for prod?

[@JasonJA88]

Submitting a form without reloading the page and no JavaScript is involved... I know about the hidden trick. I want to see a live example so I can look under the hood.

[@TheMrTheseus]

Separation of concerns is dead.

[@ad-iqchnspart8940]

Remin --> Next

[@SeanCassiere]

tRPC!!!!

[@benxneo]

hi

[@eliyahutarab4862]

Yooooo

[@NeoChromer]

Ive been using “actions” for years now how is this new… man the web is so wild

[@capability-snob]

The biggest takeaway from E (besides capability theory) was not promises or promise pipelining, it was that making communication explicit is important for security and correctness in the face of network errors. It looks like react developers are going to discover that anew.

[@vicitacious]

Joink

[@shaunmak8037]

Why are we going back to colocation again? Damn i'm sick and tired of this whole mess.

[@cowabunga2597]

Theo with the Colombian Drug Cartel Drip

[@jaroslavhuss7813]

This gives me php vibes...

[@ivanakcheurov]

Is “API first” principle obsolete nowadays? How can Server Components allow other clients to use the same backend? That was the whole point of SPAs, mobile clients communicating only over REST/GraphQL so that you are free to add more clients/automation/consumers later with no effort

[@Candyapplebone]

Yeah i wanna make a web and mobile version of my app and im wondering, if i go with these server utilities from nextjs, wont i be unable to use the api w/ my ios/kotlin apps?

[@Saurabhkumar-bn3dl]

​@@Candyapplebone Use next but just ignore all these new 'kool' stuff. These are made for quick and dirty Saas which needs to be deployed quickly. Anything super huge and it will become a mess. Stick with seperate API method, create an API with Nestjs and use other features of next.

[@muzammilsyed2339]

Lol

[@zf0666]

Is TRPC dead because of this?

[@yuryzhuravlev2312]

SvelteKit solved it much better

[@kp8752]

“use server”; is such an ugly way to denote this functionality

[@samuelgunter]

thanks for your opinion

[@nullzeon]

First?