When & Where to Add “use client” in React / Next.js (Client Components vs Server Components)

👉 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

[@ByteGrad]

👉 NEW React & Next.js Course: bytegrad.com/courses/professional-react-nextjs

[@mehdisadeghian3984]

Simple, Clear, and Short Video, @ByteGrad perfect job

[@wei7360]

I’ve checked so many channels and this is the only channel the provides more intermediate tutorials. Subscribed !!!

[@kelvenraymond8444]

Very clear, this is the only channel that provides clear information about this subject ! Thanks a lot !

[@MEIYANG-sj2sb]

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!

[@judemusyoki7052]

Man you cleared some issues I was having with Next 13, thanks man. Your channel is definitely going to grow

[@kishirisu1268]

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 😂

[@stivenmolina4075]

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

[@ankursaha9133]

These were the exact doubts I was having since I learnt the basics of nextjs, thank you so much

[@martintaanlee]

This is a great explanation, so helpful - thank you!

[@roby_codes]

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.

[@aimenmansouri7648]

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

[@kidreative]

thank you so much.. it helps me loads bro..

[@humbertogarcia9404]

Thanks for the explanation ByteGrad, I could understand everything. Now I can keep forward on my path.

[@introvertedbot]

Man, your videos are helping me so much, thanks a lot

[@Kyle-rf5mb]

Good explanation after checking a few other videos this one is clear and to the point.

[@dawid_dahl]

Extremely useful video. Thank you!

[@yendar9262]

Amazing explanation. I was surprised learning you did not have 100k+ subscribers. You'll get there soon enough.

[@ByteGrad]

Thanks, appreciate it

[@iChristiannn]

​@@ByteGradat 112k now 8 months later 🎉 you did it

[@augedoo8409]

Superb explanation. Thank you.

[@dan_b8982]

Fantastic explanation of the difference between the render and provider tree - never even occurred to me

[@alibinnaseer]

I learned soo much. Keep creating

[@mDHARYL]

Thanks, now this helps me solve my problem

[@meka4996]

Amazing! You are the man!

[@AndreasStraub]

Very well explained and really important to know! Thx for sharing

[@AdityaSharan811]

Thanks i was looking for some intermediate level tutorial Keep posting contents

[@mikevarela2741]

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?

[@SarathChandran96]

Clear explanation. you have a bright future in teaching brother

[@chiho8119]

Clearest explanation

[@jellyfish1772]

Thank you so so so much

[@Brandonbrandon1408]

Bro literally explained whole nextjs concept in less then 10 mins❤❤❤

[@fhkodama]

Good job! Thanks!

[@tacolegs2833]

Very interesting! I've watched your videos for a while and have always been curious about what color scheme you use! '

[@AhmadHassan-hb3lb]

Great explanation

[@Riot-Mafia-UP32]

Thanks.

[@geosystems2106]

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 !

[@didarnawzad]

Ur great ❤

[@PRANAVMAPPOLI]

nice !!

[@ianc6418]

great videos

[@Alex-km2ni]

good job 😉

[@akshaykumargupta6530]

You are an OG ❤

[@chesterxp508]

GoodJob!

[@asadmalik5075]

Just one word WOW

[@hey.............]

Great video man, hope while releasing course, you will have country specific pricing.🤞🏼

[@ByteGrad]

That's the plan!

[@artursavchuk2363]

I thought that providers make their children as "use client" too Thanks for the explanation! ❤

[@designerborhan3727]

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.

[@undergroundmaster8]

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?

[@zul.overflow]

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]

Thanks!! Btw why does your SM7b sound like this? It sounds like you’re talking into a cheap headset mic.

[@programmingbeat6646]

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

[@ujjwalsaini4570]

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.

[@Edgar-pu1lc]

Can i render server component in client component using render props pattern ?

[@tunamusic2314]

what client-side interactivity means ?

[@doguarunbayraktar]

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.

[@eavoutdom190]

Bro resolved my doubts 💀

[@owenz1500]

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?

[@markstein2845]

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

[@markstein2845]

To make this transition from server to client use suspense

[@alexandersamokhin]

What about button that needs to send a fetch request?

[@hadialsimsmani9859]

take a shot everytime he says component

[@gustavoefftin94]

man, the guys who created this really messed up

[@alaskandonut]

Why do you say that?

[@gustavoefftin94]

@@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

[@xxapoloxx]

Everything i have seen about react so far SUCKs, Nothing i have seen makes it better than WebComponents