hey man , i just bought your course today. I think you have something special which distinguish you from other youtubers. you have a nice way of explaining, without letting us feel board. something else is that you explain multiple use cases for each scenario, which i can relate to and im sure others also can relate to. The third thing which is a bit weird but your voice is relaxing and is nice to hear 😂 unlike other people which might be screaming or talk very low tune. thanks man ,, the best course ive even purchased.
This video is so great, I always thought that putting my server components inside of client components, as "children", they would become client components as well. Thanks for the explanation.
I think it's important the emphasis the fact that "use client" declares a client boundary. And a big gotcha is the fact that you can't pass functions from a server component to a client component. You have to make a component that uses the "use client" directive and this component will render your other client component that needs to take a function as a prop. So keep in mind that a component that takes a function as a prop can only be rendered by another client component.
This is the fundamental thing I haven't seen anyone explain what it entails in terms of how we build NextJS apps from an architectural POV. (I've just come back to React on a new project, so still learning RSC). The beauty of NextJS was that it made it very clear: You have a page component that is stateful, does all the data fetching and contains all the behaviour, which you can pass down to dumb, presentational components as props, i.e. state and callbacks. Now with RSC, you can't pass callbacks from a server- to a client-component. The solution given is always just to push down the callbacks into the client component which means to introduce another client component to wrap the presentational comp (what would otherwise be sufficient before on its own). RSC are much more like Angular1 IMO, a multi-paged app with islands of interactivity than any version of React (post-SPA) I've used before. Crazy how things go full circle
Big thanks for the explanation. Especially the deeper explanation of context and the duality of the button in server vs client components. Not sure why this has been confusing but it’s making sense now. Question. Could we put the ‘use server’ pragma on server components to force a build error during dev?
I was always unsure about what runs in server and what runs in client. Unfortunately, this video did not really solve that question mark, at least it gave me a thread to follow : "use client". Thanks !
@6:00 but now it's a button without much things todo I mean where is it reading data from? When/where would the form show a loading indicator & how would it know?
Thanks for sharing. I’m using a third party UI library, Chakra UI, in my project. And seems I have to make all my components as client components in order to use this library. Does anyone have any solution for this, or any alternatives I can use?
I think that some of the confusion with React server components revolves around that fact that the API is not very explicit. Components can get opted into client side rendering implicitly and the developer simply has to memorize these rules in order to avoid issues. The same could be said for issues with pages being automatically opted into dynamic rendering in Next.js. I've noticed that more recent versions of Next.js and ESLint have started warning more about client/server pitfalls. This definitely helps but my feeling is that they're trying to pick up the slack for what are probably just shortcomings with the API itself.
I have question about use client in your code yoy added use client on button component because use on click but when you want show counter in form when user click show preview of counter we should add use client on form as parent copmonent because of use state counter imagine this concept aboue huge copmonent in page fetch data ssr and pass data as props in to root component to show preview data and filter data is parent coponent give data as props need use client at the top?
Your tutorial is outstanding. Take love form Bangladesh. if you can little explain slowly then we could better understand it. Because english isn't our mother language.
Assuming the following is true: - a Button.tsx defines a button components - has NOT "use client" specified - uses "onClick" props - is imported inside a client component (hence becomes a client component in that instance) - is used on a server component (hence should remain a server component in that instance) What happens with "onClick" on the server?
I'm still confused as to what counts as needing the "use client", since you said here that forms can remain a server component, but forms generally have input boxes for users to type into, and those forms usually require some kind of state, so how would you do a form using a server component? Do you make each input its own client component so that the form is made up of smaller client components?
Man thank you a lot for this explanation. Im created an app while respecting all the conventions and rules about Client and Server components but when I run “npm run build” it shows that every page Its rendering “server-side rendering at runtime”. What could be the problem?
I am currently developing a Next.js application that utilizes Django for the backend and Next.js server actions. In my workflow, I fetch initial data using a GET request and subsequently update it using a form. However, upon submitting the form, I observe that the initial GET request is re-run, leading to redundant server-side fetching
I saw this line in the next.js documentation, according to this line children of the ThemeProvider will also become client components. Is there something different when it comes to children component pattern? /* "use client" is used to declare a boundary between a Server and Client Component modules. This means that by defining a "use client" in a file, all other modules imported into it, including child components, are considered part of the client bundle. */ What does this mean with regards to your example in Blunder#2 ? Please excuse me if i am missing something obvious, kinda new to this.
This should be the first section of the NextJS docs My code worked perfectly... until I hit build, and it went to hell Thanks to your video now it works !!
Great explanations, but in a real project, generally a button is designed to change state from the parent (so the parent is a client component too… right ?) how to manage with this ?
Hey!, I have been watching your videos and I understand the difference between server vs client components but I need a hand to pass props from server to client. Usually I am trying to pass class objects like (Food, or FoodChoices) and it does not work. So how am I going to populate client components? Thanks.
Hello, sir i want to ask about app dir. Is it only the `app` directory that make our component as a server component (by default)? What if i make a component inside directory ex: src/components/Test.tsx (not under the app dir hierarchy) but i don't put the 'use client' on that component; Is my `Test.tsx` become server component? or i have to move it under the `app` dir hierarchy? Thanks in advance
@alaskandonut many this. One of them: I saw A LOT of developers confusing things due to this 'use client' stuff. It leads devs to think that the component will be rendered on client
👉 NEW React & Next.js Course: bytegrad.com/courses/professional-react-nextjs
I’ve checked so many channels and this is the only channel the provides more intermediate tutorials. Subscribed !!!
I spent many hours trying to learn server component. This is one the best video that explains basics with simple examples. Subscribed.
hey man , i just bought your course today. I think you have something special which distinguish you from other youtubers. you have a nice way of explaining, without letting us feel board. something else is that you explain multiple use cases for each scenario, which i can relate to and im sure others also can relate to. The third thing which is a bit weird but your voice is relaxing and is nice to hear 😂 unlike other people which might be screaming or talk very low tune. thanks man ,, the best course ive even purchased.
Amazing, thanks and enjoy!
Very clear, this is the only channel that provides clear information about this subject ! Thanks a lot !
Amazing explanation. I was surprised learning you did not have 100k+ subscribers. You'll get there soon enough.
Thanks, appreciate it
@@ByteGradat 112k now 8 months later 🎉 you did it
Love the simplicity of Next, I still haven’t found a way to use Material UI on my frontend w/out having to convert to client components
Simple, Clear, and Short Video, @ByteGrad perfect job
Man you cleared some issues I was having with Next 13, thanks man. Your channel is definitely going to grow
This video is so great, I always thought that putting my server components inside of client components, as "children", they would become client components as well. Thanks for the explanation.
Bro literally explained whole nextjs concept in less then 10 mins❤❤❤
These were the exact doubts I was having since I learnt the basics of nextjs, thank you so much
thank you sooooo sooooo much, I was confused for the 'use client' for weeks and you explained in a clearly and easy way to understand!
Fantastic explanation of the difference between the render and provider tree - never even occurred to me
You answered a question I had in my mind for several days. Thank you for the clarification. By the way, your method of explanation is excellent
Thanks for the explanation ByteGrad, I could understand everything. Now I can keep forward on my path.
Thanks i was looking for some intermediate level tutorial
Keep posting contents
Good explanation after checking a few other videos this one is clear and to the point.
This is a great explanation, so helpful - thank you!
Clear explanation. you have a bright future in teaching brother
Man, your videos are helping me so much, thanks a lot
I think it's important the emphasis the fact that "use client" declares a client boundary. And a big gotcha is the fact that you can't pass functions from a server component to a client component. You have to make a component that uses the "use client" directive and this component will render your other client component that needs to take a function as a prop. So keep in mind that a component that takes a function as a prop can only be rendered by another client component.
This is the fundamental thing I haven't seen anyone explain what it entails in terms of how we build NextJS apps from an architectural POV. (I've just come back to React on a new project, so still learning RSC).
The beauty of NextJS was that it made it very clear: You have a page component that is stateful, does all the data fetching and contains all the behaviour, which you can pass down to dumb, presentational components as props, i.e. state and callbacks.
Now with RSC, you can't pass callbacks from a server- to a client-component. The solution given is always just to push down the callbacks into the client component which means to introduce another client component to wrap the presentational comp (what would otherwise be sufficient before on its own).
RSC are much more like Angular1 IMO, a multi-paged app with islands of interactivity than any version of React (post-SPA) I've used before. Crazy how things go full circle
Great explanation. New to next.js.
This is really helpful. Thank you so much!
dude, i`m amazed! gj
thank you so much.. it helps me loads bro..
Best explanation ever.
Big thanks for the explanation. Especially the deeper explanation of context and the duality of the button in server vs client components. Not sure why this has been confusing but it’s making sense now. Question. Could we put the ‘use server’ pragma on server components to force a build error during dev?
Superb explanation. Thank you.
Very interesting! I've watched your videos for a while and have always been curious about what color scheme you use! '
I learned soo much. Keep creating
Extremely useful video. Thank you!
Great video!
I was always unsure about what runs in server and what runs in client. Unfortunately, this video did not really solve that question mark, at least it gave me a thread to follow : "use client". Thanks !
Clearest explanation
I thought that providers make their children as "use client" too
Thanks for the explanation! ❤
@6:00 but now it's a button without much things todo
I mean where is it reading data from?
When/where would the form show a loading indicator & how would it know?
Amazing! You are the man!
Thanks for sharing. I’m using a third party UI library, Chakra UI, in my project. And seems I have to make all my components as client components in order to use this library. Does anyone have any solution for this, or any alternatives I can use?
Thanks, now this helps me solve my problem
Great video man, hope while releasing course, you will have country specific pricing.🤞🏼
That's the plan!
Very well explained and really important to know! Thx for sharing
Very cool!
I think that some of the confusion with React server components revolves around that fact that the API is not very explicit. Components can get opted into client side rendering implicitly and the developer simply has to memorize these rules in order to avoid issues. The same could be said for issues with pages being automatically opted into dynamic rendering in Next.js. I've noticed that more recent versions of Next.js and ESLint have started warning more about client/server pitfalls. This definitely helps but my feeling is that they're trying to pick up the slack for what are probably just shortcomings with the API itself.
I have question about use client in your code yoy added use client on button component because use on click but when you want show counter in form when user click show preview of counter we should add use client on form as parent copmonent because of use state counter imagine this concept aboue huge copmonent in page fetch data ssr and pass data as props in to root component to show preview data and filter data is parent coponent give data as props need use client at the top?
bytegrad on inspecting page view source of a server rendered page i am unable to see any html tags, can u help in this regard
Your tutorial is outstanding. Take love form Bangladesh.
if you can little explain slowly then we could better understand it. Because english isn't our mother language.
good job 😉
Assuming the following is true:
- a Button.tsx defines a button components
- has NOT "use client" specified
- uses "onClick" props
- is imported inside a client component (hence becomes a client component in that instance)
- is used on a server component (hence should remain a server component in that instance)
What happens with "onClick" on the server?
I'm still confused as to what counts as needing the "use client", since you said here that forms can remain a server component, but forms generally have input boxes for users to type into, and those forms usually require some kind of state, so how would you do a form using a server component? Do you make each input its own client component so that the form is made up of smaller client components?
Great 👍
Great explanation
Man thank you a lot for this explanation. Im created an app while respecting all the conventions and rules about Client and Server components but when I run “npm run build” it shows that every page Its rendering “server-side rendering at runtime”. What could be the problem?
I am currently developing a Next.js application that utilizes Django for the backend and Next.js server actions. In my workflow, I fetch initial data using a GET request and subsequently update it using a form. However, upon submitting the form, I observe that the initial GET request is re-run, leading to redundant server-side fetching
Ur great ❤
Good job! Thanks!
So reading localstorage requires client comp?
You are an OG ❤
Thank you so so so much
I saw this line in the next.js documentation, according to this line children of the ThemeProvider will also become client components. Is there something different when it comes to children component pattern?
/* "use client" is used to declare a boundary between a Server and Client Component modules. This means that by defining a "use client" in a file, all other modules imported into it, including child components, are considered part of the client bundle. */
What does this mean with regards to your example in Blunder#2 ?
Please excuse me if i am missing something obvious, kinda new to this.
This should be the first section of the NextJS docs
My code worked perfectly... until I hit build, and it went to hell
Thanks to your video now it works !!
what client-side interactivity means ?
Bro resolved my doubts 💀
Great explanations, but in a real project, generally a button is designed to change state from the parent (so the parent is a client component too… right ?) how to manage with this ?
great videos
Hey!, I have been watching your videos and I understand the difference between server vs client components but I need a hand to pass props from server to client. Usually I am trying to pass class objects like (Food, or FoodChoices) and it does not work. So how am I going to populate client components? Thanks.
Hello, sir i want to ask about app dir.
Is it only the `app` directory that make our component as a server component (by default)?
What if i make a component inside directory ex: src/components/Test.tsx (not under the app dir hierarchy) but i don't put the 'use client' on that component;
Is my `Test.tsx` become server component? or i have to move it under the `app` dir hierarchy?
Thanks in advance
Can i render server component in client component using render props pattern ?
GoodJob!
Thanks.
nice !!
Just one word WOW
What about button that needs to send a fetch request?
what is your theme bro ?
10/10
So many places where things could go wrong/unexpected 😅
Dr. Eric berg teaching programming
drink everytime he says component.
Close your eyes. Listen. It's Bao-Dur from KOTOR 2.
take a shot everytime he says component
man, the guys who created this really messed up
@alaskandonut many this. One of them: I saw A LOT of developers confusing things due to this 'use client' stuff. It leads devs to think that the component will be rendered on client
Everything i have seen about react so far SUCKs, Nothing i have seen makes it better than WebComponents