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 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.
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?
This is such a great explanation of this detailed situation! Are there dev tools available to help indicate when and where components become client components maybe unintentionally? Like something that labels the server and client components or warns you when the app is changing the server components to client components?
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 !
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 !!
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?
@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?
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?
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 ?
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?
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.
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
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
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.
@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 !!!
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!
I spent many hours trying to learn server component. This is one the best video that explains basics with simple examples. Subscribed.
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
Bro literally explained whole nextjs concept in less then 10 mins❤❤❤
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.
Very clear, this is the only channel that provides clear information about this subject ! 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
Man you cleared some issues I was having with Next 13, thanks man. Your channel is definitely going to grow
Simple, Clear, and Short Video, @ByteGrad perfect job
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!
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
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
Fantastic explanation of the difference between the render and provider tree - never even occurred to me
This is a great explanation, so helpful - thank you!
Clear explanation. you have a bright future in teaching brother
Thanks for the explanation ByteGrad, I could understand everything. Now I can keep forward on my path.
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?
Thanks i was looking for some intermediate level tutorial
Keep posting contents
Best explanation ever.
Great explanation. New to next.js.
Man, your videos are helping me so much, thanks a lot
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.
Clearest explanation
Good explanation after checking a few other videos this one is clear and to the point.
Superb explanation. Thank you.
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?
This is such a great explanation of this detailed situation! Are there dev tools available to help indicate when and where components become client components maybe unintentionally? Like something that labels the server and client components or warns you when the app is changing the server components to client components?
I thought that providers make their children as "use client" too
Thanks for the explanation! ❤
Extremely useful video. Thank you!
thank you so much.. it helps me loads bro..
This is really helpful. Thank you so much!
dude, i`m amazed! gj
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 !
Thanks, now this helps me solve my problem
I learned soo much. Keep creating
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 !!
Amazing! You are the man!
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?
Great video!
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?
@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?
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?
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 ?
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
Very well explained and really important to know! Thx for sharing
Bro resolved my doubts 💀
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?
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.
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
Great explanation
Very interesting! I've watched your videos for a while and have always been curious about what color scheme you use! '
So reading localstorage requires client comp?
Very cool!
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.
Good job! Thanks!
what client-side interactivity means ?
Great video man, hope while releasing course, you will have country specific pricing.🤞🏼
That's the plan!
Thank you so so so much
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
Thanks.
Can i render server component in client component using render props pattern ?
Just one word WOW
what is your theme bro ?
10/10
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 😉
Dr. Eric berg teaching programming
What about button that needs to send a fetch request?
great videos
You are an OG ❤
Great 👍
Ur great ❤
So many places where things could go wrong/unexpected 😅
GoodJob!
nice !!
Close your eyes. Listen. It's Bao-Dur from KOTOR 2.
drink 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
take a shot everytime he says component
Everything i have seen about react so far SUCKs, Nothing i have seen makes it better than WebComponents