React visually explained: 'use client'

What 'use client' is, why it exists, how it works, and how to use it.
The 'use client' directive introduces a new dimension to bundling: allowing developers to use the same language and JSX component model for UI concerns that span the client and server. Replacing network synchronization code in multiple languages, routing systems, and frameworks with simple components and props.
This is an excerpt from a conference talk I gave at React Universe.

[@shinchima]

Delba's explanations are always concise and clear, cheers!

[@Delba]

Cheers!

[@aryankathawale9269]

Must've taken like a million years to make this one video , huge success , sharing with others in my part of the sphere

[@Delba]

Thank you :)

[@v0.1-y1j]

This is so far the best video that I've watched on this topic, flawlessly explained even if the content is somewhat advanced. Great job Delba!

[@SavvasMohito]

This is one of the best presented and straightforward react guides I've watched. Thank you

[@Delba]

Thank you for saying so, glad to hear it!

[@ahmetsk]

This is one of the most informative videos I’ve watched in a while and you’ve opened up a world of ideas for me now. Keep it up!

[@saddamhossain6270]

She has a very clear voice, which I love to listen to again and again. In addition, very good explanation of each topic.

[@arturshaser]

The video I'll now force every react dev to watch. Very great (and simple!) explanations, beautiful and soo inspiring animations, and also nice analogies!! Thank you Delba! 🎉 Hopefully your emergency got peacefully resolved 🙏

[@Delba]

Thank you, yes, all is well now 🙏

[@FarazFKhan]

Waow, I would pay for a course on using Remotion this well - absolutely blown away by the quality of the graphics here!

[@giuseppecv56]

Wow, you are a developer with the spirit of a designer, I loved your presentation 💯

[@knuckleup9191]

wow this is the best explanation of this concept I've seen

[@ibnurasikh]

as always with the very clever visual explanation, as a dev and also a teacher i learn so much from you, thanks!

[@Delba]

Happy to hear it!

[@zero_this]

the much of effort in these videos is soo incredible , thanks for your efforts 🙏

[@Delba]

Thank you!

[@alliardalimo6665]

Really love how you explain, can't wait for your in-depth explanation again of how RSC Payload works for reassambe client & server component at the client 🤗

[@Delba]

Thank you, good idea 🙏

[@prasadpulaguntla9255]

One of best explanation of react server components!!

[@benjaminsantana2837]

Great content, it gives me peace the way you explain everthing!

[@nernaykumar1481]

Animations are really cool , it helped me understand how bundling works visually , great work Cheers!!

[@thilirathnayaka]

As it turns out, i understand well visually. This is PERFECT! Thank you so much! 😊

[@Delba]

Glad to hear it!

[@anjaneekumar-singh]

I think my KZbin recommendations becoming better. Great content 😊☺️

[@allanfrancis5760]

Simply brilliant explanation, thanks for sharing!

[@jamesgulland]

damn, this is so clear and concise. biggups from the UK ❤

[@Delba]

Cheers James!

[@vandhuymartins9481]

I have yet to find any videos as well-made as yours Delba. You ROCK! 🤘

[@Delba]

Thank you! 😊

[@Silverdagger258]

Amazing summary of how things work. Very concise and to the point

[@Delba]

Glad to hear it!

[@forestpandabath]

Yes, you really do explain things clearly, it's great.

[@hyungjikim]

so much help understanding server component. thanks and looking foward to the next video!

[@ways.]

Amazing work! Just loving the visuals alongside the explanation!! Please make more of these ❤

[@Deus-lo-Vuilt]

Thanks Delba, I was waiting for another video of yours, I like the way you explain, I hope you can upload content more frequently.

[@NeilPuttick]

Really useful, thanks. This talk helps to strategise how to use server actions / components in NextJs, especially the “use server” gotchas!

[@jackryan6838]

What a phenomenal video, Thanks so much.

[@mohammedmshal5483]

As usual, a more than wonderful explanation، Thank you ❤

[@Delba]

Glad to hear it!

[@_mrwebwork]

This is an excellcent explantation, great job!

[@paraspavasiya6108]

Great explanation and one of the best visualisations. 👍 👌

[@sam_dare]

I have been using "use client", this video is helpful.

[@Mirislomovmirjalol]

hey Delba. We want more videos like this. Especially more advanced ones please!!!

[@abdulrehmanjaved-rt8jq]

Thanks Delba! I wish you upload videos at least 1 video in 2 weeks, I am not saying regular videos as I understand this level of content takes time.

[@Delba]

I’ll get back to it soon!

[@SehajChawla]

Thank you for making videos like this! Your videos make nextjs concepts finally click for me.

[@Delba]

Glad to hear it!

[@thecodelogin]

My concept is just enhanced beautifully. Thanks Delba Amazing.!

[@Simiaaaa]

I love your videos, your're doing an incredible work ! Bravo

[@viktorsmakreckis4879]

Great video and explanation as usual. Thank you for these!

[@Delba]

I appreciate it!

[@refeals]

Awesome vídeo! Really great explanation to common problems

[@facundopellicer7514]

wonderful explanation

[@bwprado]

You are amazing! Thanks for this wonderful video!

[@jaecheokkim99]

Your video always made my day :) thank you!!!!!

[@JamesQQuick]

AMAZINGG! Thank you :)

[@nayeemxtreme]

Excellent explaination, Delba!

[@hachetrescomacatorce2340]

awesome!!!!!!! thanks a lot, greeting from colombia

[@Frankrypto]

the animation is sooo good! thank you.

[@ferhatsunaycansev106]

Perfect video, thanks a lot

[@O1zo]

Great video! I hope more to come

[@devhims]

@Delba I noticed a small bug at 10:27. 'server-only' package is meant for modules that should never be imported on the client.

[@frankdearr2772]

great topic, thanks 👍

[@w1atrak1ng]

Now it makes so much sense, thanks

[@Delba]

Woohoo, glad to hear it!

[@MuhammadOwais-ue4jb]

very well explain with visualization.

[@magnuserikkeenrobot1117]

delba you are the best!

[@essawy897]

man, forget about react. just teach us how to be this good at Remotion please.

[@avinashmurmu9070]

How the hell do you make these videos 🤯💯🔥

[@Trust3D]

Adobe ae

[@aro-aro-aro]

@@Trust3D no she mentioned in other videos that she uses remotion

[@Trust3D]

@@aro-aro-aro ok, I see

[@skidkadda]

You should watch Jurassic Park. Those effects will blow your mind

[@avinashmurmu9070]

@@Trust3D what I'm actually asking is how much time does she invest to make these videos....in AE to animate each and every line....it would take a month or even more.

[@parimal20]

Please mam make a full video series on react js. This is awesome 👍🏻😎

[@tobitacklestech]

great explanation!

[@omega.developer]

Well, I was exaggerated. Extremely beautiful coding video. Video quality, presentation is absolutely like apple products. Please let us know what software’s and video gear you use 👏🙌

[@Hasheemdev]

yes please

[@Delba]

Thank you! I use Remotion and a DLSR camera.

[@prathameshgharat7772]

Thanks a lot for creating this. 🙏🏼 Was this really made using remotion as others mentioned? It feels like a lot of thought and work was put in building the framework for yourself that was needed to make videos like this... The animations, highlights and explanations are spot on. 👏🏼

[@Delba]

Thank you. Yeah, its remotion + custom utilities.

[@kartikkaushik4743]

Hi Delba i wish you get more subscribers to your vedio pls continue this series and pls make the complete playlist of nextjs if possible

[@ROYALNIL_SITE]

very nice delba , your learn is good ,which program you use for making this video special to move with code & highlight things? if your video become shorter in two video is better .

[@Delba]

Thanks, I use Remotion.

[@HijabiCoder]

I would watch a tutorial on how you made this vid 🔥

[@bm2ilabs]

totally agree so clean

[@guiguicdd]

Yep ✋️

[@Delba]

Maybe one day :)

[@mauricio_per3z]

Delba, what a great content you are making, I encourage you to keep this work up, you have a great talent. Just for curiosity, what tools do you use to make this quality of videos here? Cheers from El Salvador

[@Delba]

Thank you, I use Remotion

[@mauricio_per3z]

@@Delba thank you!!

[@vinitgupta1648]

Most beautifully composed video I have seen!! How are you making these edits?

[@Delba]

Thank you. I use remotion.

[@MonkeyD.3892]

Great Video Thanks Delba

[@design-0000]

wow great tutorial.

[@MrLightning10000]

Hey Delba, great Video! What theme and font are you using for the code? I like it a lot!

[@Delba]

vitesse and geist

[@binh1298ify]

This is such an awesome video, may I ask what you used to make the "slides"?

[@VictorYami]

awesome explanations!

[@sagittaeaether]

These videos are super insightful with the explanations and the animations, I've been going through the materials provided to learn Next and the public repos, but I'd really appreciate it if you could tell me other developer advocates channels to create my playlist

[@Delba]

Thank you, glad to hear it. Lee does a lot of Next.js videos: www.youtube.com/@leerob. But in general, there are a lot of great Next.js videos from the community, so try searching for the topic you're interested in.

[@sagittaeaether]

@@Delba Thank you 😊

[@SonuSingh-sm7jy]

Everytime when come to youtube , then i check to see your new video come or not😅

[@Delba]

Haha, today's the day!

[@DhrubaPatra1611]

Wow such a nice video.

[@elonmask4077]

a well deilvered.. thanks a lot!!

[@DominikSipowicz]

Amazing video :)

[@Delba]

Thanks Dom 🖤

[@TonyGustafsson]

Good explaination!

[@TheCodeDealer]

Nice video, I like the animations and the graphics. How do you do the animations and these graphics if I may ask?

[@Delba]

Thanks, I use a tool called Remotion.

[@TheCodeDealer]

@@Delba Thank you

[@emilia1520]

Woo! Another video! 😄

[@Delba]

We're so back.

[@Michaeljamieson10]

awesome

[@younesjabbour8253]

impressive !

[@amirhoseini3563]

omg really nice explanation congrats,subed

[@Delba]

Thank you, welcome!

[@abbosbekraxmonov9718]

Super, what tools did u use to make like this animations ?

[@guitarhero69]

thank you

[@jacquesduplessis6175]

Nice video Delba. I haven't used the new react architecture, as all our projects are running on the "old model". So, it looks like Nextjs can make the new React model easier to work with by giving developers an abstraction (maybe file based) to work with front-end and back-end components? Especially as we might still need an extra backend language/framework/api to deal with all the business logic. I might be missing something as I need to dig into the new features, but feel free to comment

[@Delba]

Thank you. This is just one way. There are lots of technical, team dynamic, existing infra tradeoffs. You don't have to go all in. REST APIs are fine and a good middle ground might want to look into is "backend of frontend (BFF)" architecture.

[@jacquesduplessis6175]

@@Delba Thanks Delba, I'm going to start playing with this and also look into BFF 👍🏻

[@darthvader4899]

Superb

[@mike-2342]

W visuals. W video. W delba

[@fedor_U]

Great video. But what font are you using for code snippets? Looks cool.

[@Delba]

Thank you. It's Geist Mono.

[@afansaeed1932]

Can you please make a detailed video on next-auth with interactive learning. I wanna write and learn with you. Will be very thankful

[@nls-io]

That was amazing! Thanks. Same question as the others. What are you using to do the code animations? Look great.

[@Delba]

It's a tool I'm building with Remotion.

[@GabrielDiasTeixeiraAntunes]

Your animations is amazing! Do you use remotion to do that? You can teach us how we can do the same?

[@Delba]

Thank you! Yes, I use remotion. Possibly in the future, right now I'm focused on React and Next.js.

[@27sosite73]

thank you!

[@DavinHsieh.]

This is an awesome video. May you tell me which theme and font you used for your editor? Thank you!

[@Delba]

Thank you, vitesse and geist

[@thatryanp]

Superb delivery. How much of this is specific to Nextjs?

[@Delba]

Thank you. Not much, this is primary a react/bundling feature, but its implemented in frameworks.

[@amrmohamed2608]

Hey! can you please tell me what do you use for the animation and video creation?

[@VaibhavShukla-bd9pv]

Delba's i have simple question. Did you coded all the motion graphics in this video using remoiton or you hired someone plz answer. AND If emotion how and where did you learned it form do 'Amazing shit like these '?

[@Delba]

Just me, Remotion and time :)

[@gappalchemist]

🐐

[@abdoufma]

Very insightful video! 13:40 is this what happens when you use next's `output: "export"` mode?

[@Delba]

Yes, but `output: export` forces static pre-rendering for your entire app. You can also enable static rendering on a per route basis, and with Partial Pre-rendering on a per component basis.

[@conceptresearch2002]

Next JS is working so good for better performance with better optimization. But, under the hood system is very confusing. Please make a video on streaming with Suspense.

[@luizarnoldchavezburgos3638]

Your code editor is amazing. Tutorial to create one like that please!

[@atalaykarahan1066]

how do you do these animations and graphicks design?

[@devanshgarg31]

Video is littttt