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

Рет қаралды 60,122

Күн бұрын

👉 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

Пікірлер: 67

@ByteGrad 20 күн бұрын

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

@mehdisadeghian3984 Күн бұрын

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

@wei7360 9 ай бұрын

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

@kelvenraymond8444 3 ай бұрын

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

@judemusyoki7052 9 ай бұрын

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

@ankursaha9133 9 ай бұрын

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

@MEIYANG-sj2sb 27 күн бұрын

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!

@roby_codes 9 ай бұрын

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

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

@kishirisu1268 5 ай бұрын

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

@aimenmansouri7648 10 ай бұрын

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

@dan_b8982 8 ай бұрын

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

@introvertedbot 5 ай бұрын

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

@kidreative 28 күн бұрын

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

@humbertogarcia9404 5 ай бұрын

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

@Brandonbrandon1408 8 ай бұрын

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

@dawid_dahl 6 ай бұрын

Extremely useful video. Thank you!

@yendar9262 10 ай бұрын

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

@ByteGrad 10 ай бұрын

Thanks, appreciate it

@iChristiannn 2 ай бұрын

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

@alibinnaseer 6 ай бұрын

I learned soo much. Keep creating

@mDHARYL Ай бұрын

Thanks, now this helps me solve my problem

@meka4996 9 ай бұрын

Amazing! You are the man!

@AndreasStraub 10 ай бұрын

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

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

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

@SarathChandran96 9 ай бұрын

Clear explanation. you have a bright future in teaching brother

@AdityaSharan811 8 ай бұрын

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

@augedoo8409 5 ай бұрын

Superb explanation. Thank you.

@mikevarela2741 7 ай бұрын

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

Clearest explanation

@fhkodama 10 ай бұрын

Good job! Thanks!

@jellyfish1772 2 ай бұрын

Thank you so so so much

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

Great explanation

@tacolegs2833 8 ай бұрын

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

@geosystems2106 9 ай бұрын

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 !

@Riot-Mafia-UP32 Ай бұрын

Thanks.

@ianc6418 7 ай бұрын

great videos

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

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

@ByteGrad 10 ай бұрын

That's the plan!

@didarnawzad 9 ай бұрын

Ur great ❤

@Alex-km2ni 4 ай бұрын

good job 😉

@artursavchuk2363 4 ай бұрын

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

@PRANAVMAPPOLI 6 ай бұрын

nice !!

@asadmalik5075 9 ай бұрын

Just one word WOW

@akshaykumargupta6530 10 ай бұрын

You are an OG ❤

@eavoutdom190 9 ай бұрын

Bro resolved my doubts 💀

@designerborhan3727 9 ай бұрын

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.

@chesterxp508 18 күн бұрын

GoodJob!

@undergroundmaster8 8 ай бұрын

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

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

@ujjwalsaini4570 6 ай бұрын

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.

@programmingbeat6646 5 ай бұрын

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

@alaskandonut Ай бұрын

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

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

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

@owenz1500 9 ай бұрын

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

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

To make this transition from server to client use suspense

@tunamusic2314 17 күн бұрын

what client-side interactivity means ?

@doguarunbayraktar 5 ай бұрын

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.

@alexandersamokhin 9 ай бұрын

What about button that needs to send a fetch request?

@hadialsimsmani9859 9 ай бұрын

take a shot everytime he says component

@gustavoefftin94 3 ай бұрын

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