When & Where to Add “use client” in React / Next.js (Client Components vs Server Components)
Вставка
- Опубліковано 11 лип 2024
- 👉 NEW React & Next.js Course: bytegrad.com/courses/professi...
Hi, I'm Wesley. I'm a brand ambassador for Kinde (paid sponsorship).
👉 Add authentication to your app FAST: bit.ly/3QOe1Bh
👉 NEW React & Next.js Course: bytegrad.com/courses/professi...
👉 Professional JavaScript Course: bytegrad.com/courses/professi...
👉 Professional CSS Course: bytegrad.com/courses/professi...
👉 Discord: all my courses have a private Discord where I actively participate
🔔 Email newsletter (BIG update soon): email.bytegrad.com
⏱️ Timestamps:
0:00 Blunder #1
1:30 Client vs Server Components
4:58 When to refactor?
6:03 Blunder #2
8:19 Boundary
9:06 Import twice
#react #reacttutorial #nextjs
👉 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 !!!
All UI elements are interactive by defalut, now they say - it is bad because all must be on server. So maybe just throw away React and return to the PHP where all templates were on server and all data interactions also were on server side, and push static HTML to the browsers, literally go back in time - 20 year back. And yes old time websites were really lightweight and fast, exactly what they want now from React 😂
it's not smart to say that server components are bad as well as saying client components are bad, they both have their use, the best app is the one that knows how to combine them
Very clear, this is the only channel that provides clear information about this subject ! Thanks a lot !
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
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.
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
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!
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
This is a great explanation, so helpful - thank you!
Thanks for the explanation ByteGrad, I could understand everything. Now I can keep forward on my path.
Bro literally explained whole nextjs concept in less then 10 mins❤❤❤
Good explanation after checking a few other videos this one is clear and to the point.
Man, your videos are helping me so much, thanks a lot
Fantastic explanation of the difference between the render and provider tree - never even occurred to me
Clear explanation. you have a bright future in teaching brother
Thanks i was looking for some intermediate level tutorial
Keep posting contents
Superb explanation. Thank you.
Extremely useful video. Thank you!
Amazing! You are the man!
Very well explained and really important to know! Thx for sharing
I learned soo much. Keep creating
Clearest explanation
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?
thank you so much.. it helps me loads bro..
Thanks, now this helps me solve my problem
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.
Good job! Thanks!
Great explanation
Very interesting! I've watched your videos for a while and have always been curious about what color scheme you use! '
Thank you so so so much
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 !
Ur great ❤
You are an OG ❤
great videos
good job 😉
Thanks.
nice !!
I thought that providers make their children as "use client" too
Thanks for the explanation! ❤
Just one word WOW
GoodJob!
Great video man, hope while releasing course, you will have country specific pricing.🤞🏼
That's the plan!
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.
Bro resolved my doubts 💀
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?
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 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?
Dude if your will make animations and transitions for your UI they need JS, and so they need hooks to manage the state to trigger the animations, YOU HAVE to use Client components.
What you can do is wrap your client component with a server component that fetches the data and shows it in a static way, and then when your page loads you show the data in a client component
To make this transition from server to client use suspense
Thanks!! Btw why does your SM7b sound like this? It sounds like you’re talking into a cheap headset mic.
Dr. Eric berg teaching programming
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.
Can i render server component in client component using render props pattern ?
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.
what client-side interactivity means ?
What about button that needs to send a fetch request?
take a shot everytime he says component
man, the guys who created this really messed up
Why do you say that?
@@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