React Server Components vs Client Components

  Рет қаралды 20,452

Piyush Garg

Piyush Garg

8 ай бұрын

Hey Everyone, In this video, we are going to take a look at React Server components and NextJS 14. We'll see what server components are how they are different from normal React Client Component and how they are different from Next's Server Side Rendering.
Quick Links
Full Stack Twitter Clone learn.piyushgarg.dev/learn/tw...
Master Docker learn.piyushgarg.dev/learn/do...
Video Titles
- What are React Server Components?
- What are NextJS Server Components?
- NextJS App Directory
- Server Side Rendering vs Server Components.
Hashtags
#react #reactjs #nextjs #webdevelopment #fullstackwebdevelopment #fullstackdevelopers #nextjs14 #opensource

Пікірлер: 145
@technologygadget6570
@technologygadget6570 8 ай бұрын
Mindblowing style of teaching Specially the diagram 🤯🤯
@tishukr930
@tishukr930 8 ай бұрын
I was watching shorts for this topic and your video drops with notification, the coincidence 😂
@niteshmodi5468
@niteshmodi5468 5 ай бұрын
Great Video Brother. Was here to know about hydration, but you made some more concepts clear
@mongodb-hm6bl
@mongodb-hm6bl 3 ай бұрын
great explanation Piyush, thank you so much for the concept clarification
@rog0079
@rog0079 8 ай бұрын
Now just need a nextjs project course from you which will cover all the important concepts
@mukulsinghbisht2434
@mukulsinghbisht2434 4 ай бұрын
how nicely you explained , i cant express it, thanks so much
@rameesmohammed4823
@rameesmohammed4823 8 ай бұрын
Great explanation, remembering old plain php jquery way of building application.🎉
@pranavwani
@pranavwani 8 ай бұрын
Very useful for understanding usage of SSR. Thanks Piyush!
@shivanggupta7853
@shivanggupta7853 8 ай бұрын
Thankyou Piyush, for clearing my doubt on this topic , You are such a great teacher. 💖💖
@jewelthomas668
@jewelthomas668 2 ай бұрын
Content delivered was amazing and thank you for the diagram comparison you showed that has helped to understand things alot 😇
@samareshdas767
@samareshdas767 6 ай бұрын
Such an in depth explanation. Thanks.😊
@sachityadav4141
@sachityadav4141 3 ай бұрын
StraightForward, Nicely Explained!
@JashanKapoor-ug8ih
@JashanKapoor-ug8ih Күн бұрын
Before watching this video I was thinking that I might waste 27 mins but I gave it a shot and boom! This is the by far best explanation I have encountered. Thinking of checking more videos of yours. And at last how can I forget to say Thanks bro!!
@hersheynaik3029
@hersheynaik3029 8 ай бұрын
wah kamal hogaya. Today itself I was going through the nextJs docs to understand better and viola this video pops up;
@abukhalidrifat3994
@abukhalidrifat3994 6 ай бұрын
My goodness! What an explanation!!! Thank you so much bro. Take ❤
@sadik_farhan_
@sadik_farhan_ 8 ай бұрын
It was truly amazing ! Love to see more this type of content
@theuniverse8948
@theuniverse8948 8 ай бұрын
Find your Channel Yesterday and watched SSO video really grate explanation best of luck for your future
@gauravvan
@gauravvan 8 ай бұрын
I know some of this stuff already, but listening to this feels like listening to a story.
@irshitmukherjee7943
@irshitmukherjee7943 8 ай бұрын
Your explanations are the best so far......
@arushraj3807
@arushraj3807 6 ай бұрын
Your way of teaching is amazing, hats off to u❤
@akashddeepchitransh4537
@akashddeepchitransh4537 8 ай бұрын
Really amazed at the way you teach 💯 just teaching like a wow...
@amjadawan4150
@amjadawan4150 5 ай бұрын
finally i understood what is client component and what is server component, Thanks dost
@JeetKRamnani
@JeetKRamnani 8 ай бұрын
Amazing and easy way of teaching bro i was unable to understand the concept of hydration and difference between server side rendering and server components due to the teacher which is teaching that concepts normaly use heavy techinal jargons which are hard to understand for many people including me but belive me you made it so simple to understand by using very simple words and now my concept is very clear now all thanks to you bro 💞💗
@codingintelugu8820
@codingintelugu8820 6 ай бұрын
Great video Piyush. Please consider doing a video on React Server Components payload and how do they stream into clients browsers. This will fill the gap how RSC tree & RCC tree varies and how they bind together
@AnilKumar-vp1pm
@AnilKumar-vp1pm 3 ай бұрын
Amazing work and explanation!!
@AbdulHanan-dx3cr
@AbdulHanan-dx3cr 6 ай бұрын
Great Stuff, keep making videos. Love your videos
@radhasharma2407
@radhasharma2407 8 күн бұрын
you literally made my concepts crystal clear 💯
@shaamidrees6036
@shaamidrees6036 4 ай бұрын
Bro you explained in very easy way Great teaching style
@MdAbdullah-cs7xh
@MdAbdullah-cs7xh 8 ай бұрын
Amazing tutorial. Thanks dude.
@sanketgawande3667
@sanketgawande3667 8 ай бұрын
Nicely explained, thanks 🎉
@rakibulhasan992
@rakibulhasan992 6 ай бұрын
Thank you so much for your valuable video
@mrityunjaysinha
@mrityunjaysinha 8 ай бұрын
Your contents are amazing Piyush!!
@subhadeepbanerjee7361
@subhadeepbanerjee7361 8 ай бұрын
Informative video thanks piyush vaiya❤
@learner5839
@learner5839 8 ай бұрын
Sir the way you explain us is too good. Looks like listening to a story.❤❤
@dewanmohammademon
@dewanmohammademon 7 ай бұрын
It was truly amazing !
@entrepreneurcoder2659
@entrepreneurcoder2659 8 ай бұрын
i liked the explanation. thanks for it keep bringing such informational videos
@mayanktamrkar308
@mayanktamrkar308 8 ай бұрын
Amazing, you explained in very easy way , ❤❤❤❤
@MathsWithSatyamPandey
@MathsWithSatyamPandey 8 ай бұрын
Amazing series sir❤ please continue 🙏🙏
@anmoldotx
@anmoldotx 8 ай бұрын
thank you so much piyush for this video, I was getting little confused over this topic, as recently I started to work on my college project where I tried shifting to NextJS from React. It was really helpfull and your way of teaching is so so good man, damm impressive. if possible I have one more request, if you can explain the concept of routing (app router) in NextJS like this, as I have worked with react-router-dom and I am comfortable with the flow of it, but the way app router works, weither we talk of params, Link, navigation is little different, I would like to see you way of understanding it once in contrast with react-router-dom. and yeah thanks for the good work man, just keep doing it😄😄🤓
@joshikroshan5584
@joshikroshan5584 4 ай бұрын
One of the best explanations ever👏👏👏
@gopalbharadva1390
@gopalbharadva1390 2 ай бұрын
Bro, what an explanation, 1 number.
@codingtodev
@codingtodev 8 ай бұрын
cristal clear information thanks great content
@sriman45
@sriman45 5 ай бұрын
Love you bro❤❤❤ Thanks for this video.
@FaizSultan430
@FaizSultan430 8 ай бұрын
Great explanation Piyush thanks ❤ quality content
@codeforlifehere
@codeforlifehere 8 ай бұрын
To be honest, you explained it so well, just please add that slides to the description it will be of great help
@omprakashchauhan970
@omprakashchauhan970 5 ай бұрын
In Depth Explanation Bro ❤ Keep it Up 😊
@thrifterspoint1002
@thrifterspoint1002 3 ай бұрын
V nicely explained server side rendering
@10zDelek
@10zDelek 8 ай бұрын
the last point was important thanks for sharing
@dfshoikot5904
@dfshoikot5904 7 ай бұрын
Superb Explanation
@AryanSharma-dc4bj
@AryanSharma-dc4bj 6 ай бұрын
beautiful explanation piyush
@pratikbade9634
@pratikbade9634 6 ай бұрын
Thanks for this one ❤
@moyezrabbani637
@moyezrabbani637 8 ай бұрын
Amazing Explanation Piyush Sir.
@iamayushdas
@iamayushdas 7 ай бұрын
Amazing Explanation brother ❤
@gujaratinimoj3845
@gujaratinimoj3845 8 ай бұрын
Good topic sir.. very helpful this..
@snehasish-bhuin
@snehasish-bhuin 8 ай бұрын
Amazing explained, next topic server Action :)
@devisinghlodhi9757
@devisinghlodhi9757 7 ай бұрын
Awesome explanation ever, ❤❤❤
@husnainizharkhan
@husnainizharkhan 8 ай бұрын
It's completely worth it to subscribe to your channel.
@saiots8651
@saiots8651 5 ай бұрын
extraordinary explanation Greate brother.
@awesomeshivamshorts
@awesomeshivamshorts 5 ай бұрын
Nice nice nice.....I love your teaching skill.
@mmmm-pd1qx
@mmmm-pd1qx 7 ай бұрын
Great Explanation.
@shahbazkhalid6950
@shahbazkhalid6950 8 ай бұрын
Awesome explanation.
@parthghatge2423
@parthghatge2423 8 ай бұрын
Respect Man, You are too good !!!
@asadanik5987
@asadanik5987 8 ай бұрын
That is an awesome video...take love from Bangladesh
@hustler2693
@hustler2693 3 ай бұрын
Excellent piyush.. ❤
@talibhusain3335
@talibhusain3335 Ай бұрын
Really really Amazing video🎉
@digitalizhar
@digitalizhar 8 ай бұрын
Great video sir
@vipultejyan1575
@vipultejyan1575 5 ай бұрын
Great explanation
@alihassan4726
@alihassan4726 5 ай бұрын
Excelent Explaination
@saurabhu6458
@saurabhu6458 4 ай бұрын
Thanks man !
@nirajbhanushali7693
@nirajbhanushali7693 8 ай бұрын
Awesome teaching
@ashokkumawat88
@ashokkumawat88 8 ай бұрын
Awesome!!✌
@nirbhayvora3497
@nirbhayvora3497 8 ай бұрын
very informative video
@heartlessgammer7535
@heartlessgammer7535 3 ай бұрын
Kafi sahi tha ❤❤❤❤❤
@user-zb6ez3el2d
@user-zb6ez3el2d 7 ай бұрын
Bro ! Loving your contents . It's my humble request to you to make a course on prisma with graphQL.
@Dibyendu_das_96
@Dibyendu_das_96 8 ай бұрын
Great explanation❤
@iamabhhilashdk
@iamabhhilashdk 6 ай бұрын
Great Video :)
@rohitprajapatirohu6195
@rohitprajapatirohu6195 8 ай бұрын
Bhaiya your are 🔥
@afrazali4141
@afrazali4141 8 ай бұрын
All doubt's clear thanks a lot bro love from pakistan
@devprajapati5673
@devprajapati5673 Ай бұрын
a fourth step can also be added now next uses Server side generation for getting pre rendered pages and ISR for automatic updation and SSR is only used for fetching data on user request it makes more fast how html was made earlier on server now only server has load of rendering server components. and it makes it more fast initially . because it now decrease the load time and routing from one page to other enhances. thank you🙂
@RishiRajxtrim
@RishiRajxtrim 8 ай бұрын
Gratitude!!🙂🙏💯
@subhamnegi6353
@subhamnegi6353 8 ай бұрын
Hi piyush your videos is amazing good way to learn stuff can you make video transcoding tutorial to transcode mp4 to hls with different resolution
@rajneeshmishra6969
@rajneeshmishra6969 5 ай бұрын
Love you bhaiya. You made my concepts about Next.js 14 crystal clear. Subscribed your channel!!!!❤❤❤❤❤❤ Can you please make a video on how to use Redux with Next.js 14 and especially how to handle SSR in case of Redux? And why do we need making new store for each request, because I read the docs of Redux and it was hella confusing.... Again, thank you bhaiya
@sheikhfajlayrabbi6070
@sheikhfajlayrabbi6070 8 ай бұрын
great video ❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤
@copilotcoder
@copilotcoder 8 ай бұрын
If we are fetching data in client component we can store it in state snd use it multiple times.... how can we fetch data and use it multiple times
@akshaysingh5535
@akshaysingh5535 8 ай бұрын
Hey Piyush, As you mentioned in Next 13.4 app/ there is DBquery first. So what if the query takes more time! What will be displayed in place of data which we want from db ? Also, what if we have large file size in server component, will it show blank for few sec ? P.S : I'm very new to next so, the questions could seem foolish.😅 Btw Amazing video, Great explanation 👍 👏
@kaustubsingh7981
@kaustubsingh7981 8 ай бұрын
Potential delays are possible in the dB queries we can use "getServerSideProps" method to fetch data and return a loading state or error state as needed also if possible always try to use graphql api's instead of rest as it only serves what is needed which can reduce loading delays. Hope it was helpful :)
@hrushi_borhade
@hrushi_borhade 7 ай бұрын
we can stream the data and hence the component, using suspense boundary and fallback loading component
@Shiv_the_human_code
@Shiv_the_human_code 8 ай бұрын
Suggestion: bhai course ek number h aapke bs ek suggestion h ki interview v sath sath lelo interviewbit se , the sur bette se connect kr payenge
@oneloop6902
@oneloop6902 8 ай бұрын
too good!!!
@amitdubey2209
@amitdubey2209 8 ай бұрын
best till now!!
@_rhythmsaha
@_rhythmsaha 8 ай бұрын
the more component we render in server the server will get slower, In this scenario nextjs static generation and client side components are great option as my opinion
@shubhankartrivedi
@shubhankartrivedi 8 ай бұрын
Yes it is mostly used for static pages like Blogs/Articles.
@shoaib3103
@shoaib3103 7 ай бұрын
The thing is you cannot control the user's machine but you have the option to control a strong machine server
@charuwaka1
@charuwaka1 4 ай бұрын
Client Components have access to browser APIs, like geolocation or localStorage, allowing you to build UI for specific use cases.
@prakharsinha4145
@prakharsinha4145 6 ай бұрын
hey piyush do share your exacli draw content in the description, it would save lots of our time
@phantomcatprojects8546
@phantomcatprojects8546 8 ай бұрын
Will the context provider make everthing underneath a client side rendered components
@saiots8651
@saiots8651 5 ай бұрын
I am waiting for the next js course with typescript and redux toolkit query from piyush bhai.
@vaibhavwadhavane874
@vaibhavwadhavane874 8 ай бұрын
please make a full nextjs course with one full stack project
@user-hk6jp8ol9l
@user-hk6jp8ol9l 8 ай бұрын
nice
@aditimahabole1761
@aditimahabole1761 5 ай бұрын
you aree the besttttttttt wowwwwwww
@b5fw6jg7
@b5fw6jg7 8 ай бұрын
Please explain inline "use server" and server actions as well.
@rahulhooda1745
@rahulhooda1745 8 ай бұрын
brother pls make a video on react vs remix, the diffrence and which one is better.
@Yasinafridi
@Yasinafridi 7 ай бұрын
Please make a playlist on CI/CD pipeline
@webcodeexplainedYT
@webcodeexplainedYT 2 ай бұрын
Why we need to download entire bundle at once in CSR can't be lazily loaded ?
How NodeJS Works? - You don't Know NodeJS
42:52
Piyush Garg
Рет қаралды 43 М.
What is CSR SSR SSG and ISR
16:57
Hitesh Choudhary
Рет қаралды 47 М.
He sees meat everywhere 😄🥩
00:11
AngLova
Рет қаралды 11 МЛН
HOW DID HE WIN? 😱
00:33
Topper Guild
Рет қаралды 40 МЛН
NERF WAR HEAVY: Drone Battle!
00:30
MacDannyGun
Рет қаралды 53 МЛН
Server Components in React (Simple Tutorial)
25:27
Cosden Solutions
Рет қаралды 14 М.
WTF Do These Even Mean
13:44
Web Dev Simplified
Рет қаралды 78 М.
React server components from scratch!
19:43
Ben Holmes
Рет қаралды 30 М.
Fetching Data Doesn't Get Better Than This
6:58
Josh tried coding
Рет қаралды 91 М.
Build Your Own MAIL Server | SMTP Server
51:30
Piyush Garg
Рет қаралды 107 М.
Chrome Exposes Scary System Functions To All Google Domains
25:58
Theo - t3․gg
Рет қаралды 4,4 М.
React Server Components: A Comprehensive Breakdown
52:42
Theo - t3․gg
Рет қаралды 94 М.
React Server Components vs SSR
5:36
Kodaps Academy
Рет қаралды 11 М.
He sees meat everywhere 😄🥩
00:11
AngLova
Рет қаралды 11 МЛН