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

Рет қаралды 65,595

Күн бұрын

👉 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

Пікірлер: 70

@ByteGrad Ай бұрын

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

@wei7360 10 ай бұрын

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

@kelvenraymond8444 4 ай бұрын

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

@judemusyoki7052 10 ай бұрын

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

@mehdisadeghian3984 Ай бұрын

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

@MEIYANG-sj2sb 2 ай бұрын

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!

@ankursaha9133 10 ай бұрын

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

@roby_codes 10 ай бұрын

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.

@martintaanlee 4 ай бұрын

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

@aimenmansouri7648 11 ай бұрын

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

@yendar9262 11 ай бұрын

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

@ByteGrad 11 ай бұрын

Thanks, appreciate it

@CGAR_420 3 ай бұрын

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

@humbertogarcia9404 6 ай бұрын

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

@introvertedbot 6 ай бұрын

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

@Kyle-rf5mb 5 ай бұрын

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

@dan_b8982 9 ай бұрын

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

@Daddyjs 16 күн бұрын

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.

@meka4996 10 ай бұрын

Amazing! You are the man!

@dawid_dahl 8 ай бұрын

Extremely useful video. Thank you!

@Brandonbrandon1408 9 ай бұрын

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

@valenciawalker6498 5 күн бұрын

Great explanation. New to next.js.

@alibinnaseer 7 ай бұрын

I learned soo much. Keep creating

@kishirisu1268 6 ай бұрын

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 2 ай бұрын

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

@augedoo8409 6 ай бұрын

Superb explanation. Thank you.

@SarathChandran96 10 ай бұрын

Clear explanation. you have a bright future in teaching brother

@AndreasStraub 11 ай бұрын

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

@AdityaSharan811 9 ай бұрын

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

@mDHARYL 2 ай бұрын

Thanks, now this helps me solve my problem

@kidreative 2 ай бұрын

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

@mikevarela2741 8 ай бұрын

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?

@chiho8119 7 ай бұрын

Clearest explanation

@jellyfish1772 3 ай бұрын

Thank you so so so much

@fhkodama 11 ай бұрын

Good job! Thanks!

@tacolegs2833 9 ай бұрын

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

@AhmadHassan-hb3lb 11 ай бұрын

Great explanation

@Riot-Mafia-UP32 2 ай бұрын

Thanks.

@geosystems2106 10 ай бұрын

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 10 ай бұрын

Ur great ❤

@akshaykumargupta6530 11 ай бұрын

You are an OG ❤

@Alex_2049 5 ай бұрын

good job 😉

@ianc6418 8 ай бұрын

great videos

@PRANAVMAPPOLI 7 ай бұрын

nice !!

@chesterxp508 Ай бұрын

GoodJob!

@asadmalik5075 10 ай бұрын

Just one word WOW

@artursavchuk2363 5 ай бұрын

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

@hey............. 11 ай бұрын

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

@ByteGrad 11 ай бұрын

That's the plan!

@zul.overflow 11 ай бұрын

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

@undergroundmaster8 9 ай бұрын

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?

@eavoutdom190 10 ай бұрын

Bro resolved my doubts 💀

@designerborhan3727 11 ай бұрын

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.

@programmingbeat6646 6 ай бұрын

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

@Edgar-pu1lc 10 ай бұрын

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

@alaskandonut 2 ай бұрын

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

@doguarunbayraktar 6 ай бұрын

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.

@ujjwalsaini4570 7 ай бұрын

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.

@alexandersamokhin 11 ай бұрын

What about button that needs to send a fetch request?

@tunamusic2314 Ай бұрын

what client-side interactivity means ?

@owenz1500 10 ай бұрын

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 9 ай бұрын

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 9 ай бұрын

To make this transition from server to client use suspense

@divyangbargali1554 12 күн бұрын

Dr. Eric berg teaching programming

@hadialsimsmani9859 10 ай бұрын

take a shot everytime he says component

@gustavoefftin94 4 ай бұрын

man, the guys who created this really messed up

@alaskandonut 2 ай бұрын

Why do you say that?

@gustavoefftin94 2 ай бұрын

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