I Fixed Next.js Server Actions
HTML-код
- Опубликовано: 11 сен 2024
- Next.js Server Actions have been a long time coming, so happy we can finally talk about them!
Check out zact: github.com/pin...
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 🙏
I think you mean "I awaited" since you had to Promise not to talk about it until later
god dammit sam
I laughed so hard that my tummy is hurtin'
This comment wins all of the comments
😂
Brother thats just criminally funny😂
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!
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
I feel you bro
I can't wait to start leaking my secrets with server actions 💪
If leaking action sounds awful is because it probably is.
I wonder what process.env would look like encoded into a form?
One of the best explanations on server actions! Thanks Theo
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.
Never ask a woman her age,
A man his salary,
And Remix what happened to server actions
Remix server actions actualy work and are a much better API than whatever the heck nextjs launched here
amazing
@@darren_baldwin why
Useful. Reminds me a lot of getting to grips with SvelteKit's separation of server actions. I appreciate the cleaner file-level separation.
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.
it just Php Way
in search of simplicity things are getting unbearably complicated..
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.
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.
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
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.
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
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.
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.
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!
Next js is becoming a mess
Yes, it has a ton of cool features but it's raw as f
Really useful breakdown
im loving this style of videos.
your updates on the tech space are magical
Cool. Thank you for this. Breaking out actions into a separate file is delightfully clean & easy, and provides nice separation as well.
I would love to hear your take on Remix vs. NextJS, especially now that server actions exist. Why do you choose NextJS over Remix?
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.
Is NextJS becoming the new PHP?
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).
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 😅
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
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.
Looks very nice. But am I missing something or no one mention client side validation?
Is it stil reactQuery for loading dynamic data on client? If so how would i make that typesafe until trpc "works" with next 13
Theo’s shirt never fails to impress me hahaha. Not everybody can bang this outfit hahah
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.
People: We want stuff to work out of the box!
Things: Working out of the box
Also People: 😲
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.
I was iffy about server actions and how black magic they felt, but your video really helped. Thanks Theo keep up the good work.
PHP been doing this forever.
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”)
Can’t wait for create-t3-app be updated with pack organized server actions
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 ?
couldn't you just pass that header as param in your function?
We should always do validation before posting the request. This server action examples has only demonstration values but cannot be used in real life.
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 😊
do you really need it with the new app router model?
Is this a core part of the new FootGun stack? I see a future with lots of missing toes...
Actions are awesome. Feels very native to React. Incredible how Twitter has focused on the closure gotcha
Twitter focused on the closure gotcha? Huh? Can you catch me up?
@@Candyapplebone Theo touches on this point around here ruclips.net/video/9WvJDor5uvo/видео.html
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.
Please use a dark page background color next time. Going from dark editor to bright white browser hurts.
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?
you don't have to create a api route to accomplish adding objects to a database
How does this compare to remix's action handler? Seems very similar
Is this trpc & react query equivalent on the server component? So we don't need them now?
best hairstyle so far
Im excited to adopt these patterns, but how would these patterns work with expo and t3-turbo?
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.
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
I feel like migrating from trpc to only next and server actions now
I would really miss trpc though. The power to infer output types from procedures it so nice. Awesome video like always!
You wont need tRPC now because ur writing ur backend code in ur frontend code -- so everything is typesafe by default
Yeah I think you may have missed that by using zod/zact you can ensure type safety in the same infer'd way
I realise all this. My point was that trpc could take your return value from a query and make it a type automatically
are static pages still CDN cached? or do they have to hit the server?
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.
On the form stuff it refreshed, that's why my input awkwardly disappeared
what color scheme is this?
poimandres
I'm 100% sure they are going to ship it with some broken gotcha, like useEffect
LOL the subscribe error
Doesn't declaring a variable outside a function on the server make it a global?
are you using tmux on the terminal ? what theme is that ?
I can't replicate this at the moment, did they fix this?
haha the zod error killed me
So it means Remix was right from the beginning.
do these actions need to be authorized?
So glad I watched this I didn't even consider this
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.
How do you use trpc in the app router?
WHAT A NICE SHIRT OMG
PLS some one stop server components
why
@@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
@@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?
How do you read cookies and middleware?
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
btw why refer to it as alpha when they state it's ready for prod?
Is this the first time Javascript is having server mutations in his history?
Like Sveltekit?
This video deserves more than one like, but I can only hit the button once 😢
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.
Nextjs is really moving fast
Ive been using “actions” for years now how is this new… man the web is so wild
Anyone knows some Remix RUclipsr to recomend me ? i want to know more about remix
Separation of concerns is dead.
Why are we going back to colocation again? Damn i'm sick and tired of this whole mess.
Remin --> Next
tRPC!!!!
Love the shirt :)
This gives me php vibes...
Theo with the Colombian Drug Cartel Drip
hi
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
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?
@@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.
Is TRPC dead because of this?
Joink
Yooooo
“use server”; is such an ugly way to denote this functionality
thanks for your opinion
Lol
SvelteKit solved it much better
First?