really appreciate it . Why are you so proficient in technical knowledge every time, and your examples are so concise and accurate? Keep going！Just one demo ,let me understand 3 concepts at least .
Cool video and nice explanation, but isn't this something like express with AlpineJS? I mean with this server actions you have no more animations and things like that. I'm pretty sure I'm missing something to fully get it right xD
You definitely should be able to! You can call a server action from a client component so I think that would be my first step - making a client component.
The form on the new post page stops revalidating the '/' path after its first use unless I refresh the app. The only fix I've found is to redirect to the homepage in the aftersave. Are you familiar with this issue?
this error shows up when i inspect the form after its been used at least once "throw new Error('A React form was unexpectedly submitted. If you called form.submit() manually, consider using form.requestSubmit() instead. If you're trying to use event.stopPropagation() in a submit event handler, consider also calling event.preventDefault().')"
Hmm... I haven't seen this. I know the Next.js team is working on the caching behavior (removing some of it even) because it's causing a lot of confusion
@@arjundureja yeah but that's not the point here, if you want to use client and server component in same file you need to specify it (why using server and client component in same file ? Idk I think it's stupid xd). The new nexts js things is "Do all in the same file and fuck ". I think it's a shit idea.
I've been wondering how to make reusable server actions revalidate/redirect to different routes. That's a good solution! I could also pass the route I want to revalidate as a argument instead, couldn't I? Although that would not be as flexible.
So server actions are basically a replacement for *src/pages/api* routes ? Now we can write those handlers directly on our components simply with 'use server' ?
I was having a play with server actions last week, but couldn't find an elegant solution for errors, i know its beta, but curious if you have thought about this?
Haven’t tried it yet. I think you can use the result from an action if you await it in a client component. Set state with the result and display it in the component.
I had divided opinions about server actions: - twitter says it is just back to old php days - "use server"s are bad, now we are doing them in the props of components in component returns?? - (later..) ohh wait! now can I code a form which does what it is designed to do and put it anywhere in my project, any page, any other component, without specifically defining an api endpoint? I'm not sure if I bought Sam's prensentation or design decisions behind server actions. Yet, there can be some use cases here.
Sam when you create the components folder with the file new post form at 1:42 in the video. Is that an extension your using or a quick key combo? Appreciate the video very much good stuff.
I see some Ruby on Rails influence here, but I don't like how everything is mixed together. Is there a cleaner way to do it? It's funny to imagine David from Ruby on Rails and David from React talking about ideas!
Great explanation, just what i needed for this, however, i feel like while very convenient, no extra setup needed, and way less code, it's gonna be a nightmare to figure out debug on large code bases
front end frameworks are way too much competitive. just cherry picking most liked functionality from other frameworks is not going to help the frameworks gain more traction. IMO. WDYT?
I can't undersood the error, "Function can't be passed to clientcompoent unless... " , NewFromPost is a Client component ? I thought it is a Server Component, there is no 'use client' in it .
Great question! Turns out is more or less a client component. React uses the new `action` prop to make a fetch() request from the client-side app. So, anything that's passed to it from the server needs to be serializable, since it ends up in the browser. If we had passed something like `loadMoreData()` to NewPostForm, then NewPostForm could have called that during render (i.e. `await loadMoreData`). That would have worked because it all would have happened on the server. So it's our use of that necessitates the prop to be serializable. Does that make sense?
I love the implications of this. Having concise, composable components that have their own backend logic is awesome for small teams, one man teams, or just teams who want to release features quickly.
Couple points. "All these components are server components" The components under /components are isomorphic and you can use state there Also, if you add a delay to the form submit, there is a lag before the list of posts update--but that's not a great experience, we need a loading state. Ideally we'd have some loading state while wait. Can't do that without make an API call. Other frameworks like Sveltekit have streaming as well and also support a load state if the data is invalidated without having to write client side calls to the BE.
All components (regardless of directory) are Server Components by default in Next.js 13. You could add a loading state in between the save and the call to revalidatePath. I should make a video explaining how to update the state of a client component in response to a server action completing.
@@samselikoff That would be interesting. I can certainly achieve it with useTransition; or other contraptions. Say you're taking 3 seconds to render a chart--and you have loading state for that chart. You then have link below the chart for previous or historical data (linking to the same page only with query params for the historical data). In Sveltekit, clicking a link that goes to the same page will cause the load state to show until the data is ready and the chart is rendered. This, because that data is sent via the streaming api, you need do nothing extra. In NextJS, the design choice I don't here is that if I click that link, there is a dead 3 seconds where nothing is happening. And then the data updates suddenly. The NextJS behavior is not too unlike a native web experience. And for that I can just use Astro, which is more performant. Your SVG chart with D3 should work with Astro as well; only with better performance. Having client UI loading state for users with JS turned on with nearly no additional effort is a big win for Sveltekit. Yes I can do this in NextJS (viz. useTransition, Suspense + compliment library or some Promise wrapper, etc.), it just seems to require a lot more boilerplate; unless there is some pattern for doing this with no additional effort--which I've not seen published anywhere yet. And using `redirect` within the Server Action reloads the layout. I can appreciate reloading all the data on a page just to update a chart vs client side logic to just load the data for the chart is likely more efficient; but requires a lot more work, like updating the browser state along with more code to ship and maintain. That said having a simple API and getting progressive enhancement on top of the web experience for free is the sweet spot.
The length at which the React folks have gone to explain this RSC thing and still, no one seems to get it is telling. 😅 Dan is literally on the Bird app every day, with tweets after tweets after tweets..., still we're all just like "🫤" Either we're all too *dumb to understand this "revolution" or... 🤷🏿♂️
Best explanation with best example on server components for me.. i remember i was struggling a lot at the beginning to understand getstaticprops and getserversideprops but i now find this new model way easier to understand! Thx a lot for this video! Im subbed!! 🎉
Server-side actions execution is cool! But let's think about the cost of these actions. The load on the server is growing, which means that the fee for this is growing. Executing the code on the client side will cost us less. What do you think about this?
Nop, is the inverse. If you do server actions for example, if you mutate some data and wanna revalidate the cache. In old React or every other framework, you will have to mutate (1 request), wait the response and then revalidate the data (2 request). With React new model and server actions, you can do it in 1 single request. So you will end with less requests to the server (the same to the database), reducing the client-server waterfalls. Also giving the server more power to render html is better for user experience, because if you can send html, then the browser, server or CDNs can cache it, so it will ended in less request to the server.
@samselikoff Great video. However, could you explain how do you have access to `prisma` inside of server action in NewPostForm component without import it?
Should have imported it - it comes from how Prisma recommends setting up the client in Next.js apps due to hot refresh www.prisma.io/docs/guides/other/troubleshooting-orm/help-articles/nextjs-prisma-client-dev-practices
This is easily my favourite RUclips channel right now, A+ content every time
True, a legit goldmine for intermediate devs.
Agree, his explanation is something else.
really appreciate it . Why are you so proficient in technical knowledge every time, and your examples are so concise and accurate? Keep going！Just one demo ,let me understand 3 concepts at least .
Your are amazing in presenting. Hoping a complete Next 13 crash course from you 💯
Its not enough making my favourite coding podcast, now also great yt content? So thankful
Once again, great video, Sam!
Cool video and nice explanation, but isn't this something like express with AlpineJS? I mean with this server actions you have no more animations and things like that. I'm pretty sure I'm missing something to fully get it right xD
Great video. I'm curious about state between 'renders' are you able to focus the input and save the scroll position?
You definitely should be able to! You can call a server action from a client component so I think that would be my first step - making a client component.
hey how do you navigate vscode that quick? vim bindings, or anything else?
Vim mostly!
TOMA MEU LIKE
The form on the new post page stops revalidating the '/' path after its first use unless I refresh the app. The only fix I've found is to redirect to the homepage in the aftersave. Are you familiar with this issue?
this error shows up when i inspect the form after its been used at least once "throw new Error('A React form was unexpectedly submitted. If you called form.submit() manually, consider using form.requestSubmit() instead. If you're trying to use event.stopPropagation() in a submit event handler, consider also calling event.preventDefault().')"
Hmm... I haven't seen this. I know the Next.js team is working on the caching behavior (removing some of it even) because it's causing a lot of confusion
Not sure how i feel about this
that's a willy-shaking tutorial
The "use server" "use client" everywhere in code look shitty imo
is not everywhere, just in the places you want to cross the client server bridge.
You can add "use server" to an entire file and it'll apply to all functions in that file
@@arjundureja yeah but that's not the point here, if you want to use client and server component in same file you need to specify it (why using server and client component in same file ? Idk I think it's stupid xd). The new nexts js things is "Do all in the same file and fuck ". I think it's a shit idea.
I've been wondering how to make reusable server actions revalidate/redirect to different routes. That's a good solution! I could also pass the route I want to revalidate as a argument instead, couldn't I? Although that would not be as flexible.
Yep definitely could 👍 And yes wanted to show the full function version just to demonstrate the extra flexibility
Great explanation by example. It would be nice if you also show network tab so we can understand whats going on exactly behind the scene
Incredible explanation as always Sam!
Thank you Sam! You just saved me so much time
So server actions are basically a replacement for *src/pages/api* routes ? Now we can write those handlers directly on our components simply with 'use server' ?
Exactly!
I was having a play with server actions last week, but couldn't find an elegant solution for errors, i know its beta, but curious if you have thought about this?
Haven’t tried it yet. I think you can use the result from an action if you await it in a client component. Set state with the result and display it in the component.
top tier content as always , i wish we could do more framer-motion and next 13 content
I love articulate pronunciation of Sam! Having English B1 allows to completely disable subtitles and dive into loved techs. Best wishes!
What if the server action throw an error?
I had divided opinions about server actions:
- twitter says it is just back to old php days
- "use server"s are bad, now we are doing them in the props of components in component returns??
- (later..) ohh wait! now can I code a form which does what it is designed to do and put it anywhere in my project, any page, any other component, without specifically defining an api endpoint?
I'm not sure if I bought Sam's prensentation or design decisions behind server actions. Yet, there can be some use cases here.
a bit of a dumb question, will server components work for ISR pages?
Sam when you create the components folder with the file new post form at 1:42 in the video. Is that an extension your using or a quick key combo? Appreciate the video very much good stuff.
I see some Ruby on Rails influence here, but I don't like how everything is mixed together. Is there a cleaner way to do it? It's funny to imagine David from Ruby on Rails and David from React talking about ideas!
yes, they use ideas from PHP and Ruby on Rails, said it by the React and Vercel team.
Chef, you gonna go a Million subscriber some day. 10/10 Content and Production
Great explanation, just what i needed for this, however, i feel like while very convenient, no extra setup needed, and way less code, it's gonna be a nightmare to figure out debug on large code bases
1:38 How did you use keyboard to navigate and create new folder? Never seen that before.
Isn’t inputs a client components? Can someone explain I’m new to this subject
Nice video as always though 👌🏿
does it mean we won't have server cold start if we use server action
A lot of magic happening that's going to bother a lot of people. I love it!
cool but so scared about maintainability
Love from Bangladesh
anyway to avoid that key hack at the end to reset the form?
front end frameworks are way too much competitive. just cherry picking most liked functionality from other frameworks is not going to help the frameworks gain more traction. IMO. WDYT?
I don’t think it’s cherry picking.. what other framework let’s you fetch and render within the same JavaScript scope?
I can't undersood the error, "Function can't be passed to clientcompoent unless... " , NewFromPost is a Client component ? I thought it is a Server Component, there is no 'use client' in it .
Great question! Turns out is more or less a client component. React uses the new `action` prop to make a fetch() request from the client-side app. So, anything that's passed to it from the server needs to be serializable, since it ends up in the browser.
If we had passed something like `loadMoreData()` to NewPostForm, then NewPostForm could have called that during render (i.e. `await loadMoreData`). That would have worked because it all would have happened on the server.
So it's our use of that necessitates the prop to be serializable.
Does that make sense?
I love the implications of this. Having concise, composable components that have their own backend logic is awesome for small teams, one man teams, or just teams who want to release features quickly.
Great job dude ! Tks a lot 🎉
wild
this is just beautiful
Is it good practice to mix database logic with JSX in one component?
I don’t like that part either hmm I want to try it and see what happens tho
Amazingly well presented, thank you Sam !
I wonder how this gonna affect all the blitz, trpc fullstack typscripty framework ?! looking forward to it
💙💙
So cool!
Couple points.
"All these components are server components"
The components under /components are isomorphic and you can use state there
Also, if you add a delay to the form submit, there is a lag before the list of posts update--but that's not a great experience, we need a loading state. Ideally we'd have some loading state while wait. Can't do that without make an API call. Other frameworks like Sveltekit have streaming as well and also support a load state if the data is invalidated without having to write client side calls to the BE.
All components (regardless of directory) are Server Components by default in Next.js 13.
You could add a loading state in between the save and the call to revalidatePath. I should make a video explaining how to update the state of a client component in response to a server action completing.
@@samselikoff That would be interesting. I can certainly achieve it with useTransition; or other contraptions.
Say you're taking 3 seconds to render a chart--and you have loading state for that chart. You then have link below the chart for previous or historical data (linking to the same page only with query params for the historical data).
In Sveltekit, clicking a link that goes to the same page will cause the load state to show until the data is ready and the chart is rendered. This, because that data is sent via the streaming api, you need do nothing extra.
In NextJS, the design choice I don't here is that if I click that link, there is a dead 3 seconds where nothing is happening. And then the data updates suddenly.
The NextJS behavior is not too unlike a native web experience. And for that I can just use Astro, which is more performant. Your SVG chart with D3 should work with Astro as well; only with better performance.
Having client UI loading state for users with JS turned on with nearly no additional effort is a big win for Sveltekit.
Yes I can do this in NextJS (viz. useTransition, Suspense + compliment library or some Promise wrapper, etc.), it just seems to require a lot more boilerplate; unless there is some pattern for doing this with no additional effort--which I've not seen published anywhere yet. And using `redirect` within the Server Action reloads the layout.
I can appreciate reloading all the data on a page just to update a chart vs client side logic to just load the data for the chart is likely more efficient; but requires a lot more work, like updating the browser state along with more code to ship and maintain. That said having a simple API and getting progressive enhancement on top of the web experience for free is the sweet spot.
Very clear explanations. Thanks!
What editor is being used here ? is is vim or neovim ?
This is VS Code along with the Vim extension
Outstanding example and super clear explanation 👏. Thanks. I would appreciate it if you could share the example code on your Github repo. Thanks
The length at which the React folks have gone to explain this RSC thing and still, no one seems to get it is telling. 😅
Dan is literally on the Bird app every day, with tweets after tweets after tweets..., still we're all just like "🫤"
Either we're all too *dumb to understand this "revolution" or... 🤷🏿♂️
Can we use this new approach to make classic authentication using JWT directly from server to cookies ?
mate, you are so underrateddddd. keep up with this excellent content!
sam, congrats for your content
I ever learn a lot watching your videos
tks!
Best explanation with best example on server components for me.. i remember i was struggling a lot at the beginning to understand getstaticprops and getserversideprops but i now find this new model way easier to understand! Thx a lot for this video! Im subbed!! 🎉
Perfect guide - thank you! ❤
You're a natural, Sam! I feel like I'm really getting it now.
Could you create a video to share about your vim vscode setup?
does it require server runtime to execute server code? if so, what runtime is it using in this example?
This is some quality content
Very well explained.
Server-side actions execution is cool! But let's think about the cost of these actions.
The load on the server is growing, which means that the fee for this is growing.
Executing the code on the client side will cost us less. What do you think about this?
Nop, is the inverse. If you do server actions for example, if you mutate some data and wanna revalidate the cache. In old React or every other framework, you will have to mutate (1 request), wait the response and then revalidate the data (2 request). With React new model and server actions, you can do it in 1 single request. So you will end with less requests to the server (the same to the database), reducing the client-server waterfalls. Also giving the server more power to render html is better for user experience, because if you can send html, then the browser, server or CDNs can cache it, so it will ended in less request to the server.
Mind-blowing )
@samselikoff Great video. However, could you explain how do you have access to `prisma` inside of server action in NewPostForm component without import it?
Yeah great point am surprised too
Should have imported it - it comes from how Prisma recommends setting up the client in Next.js apps due to hot refresh www.prisma.io/docs/guides/other/troubleshooting-orm/help-articles/nextjs-prisma-client-dev-practices
first comment! first minute!
Fuck, I lost