React Server Components vs Client Components

แชร์
ฝัง
  • เผยแพร่เมื่อ 23 ธ.ค. 2024

ความคิดเห็น • 178

  • @tishukr930
    @tishukr930 ปีที่แล้ว +13

    I was watching shorts for this topic and your video drops with notification, the coincidence 😂

  • @NavinY5
    @NavinY5 ปีที่แล้ว +31

    Mindblowing style of teaching
    Specially the diagram
    🤯🤯

  • @MohammedHusainmobikira
    @MohammedHusainmobikira 23 วันที่ผ่านมา

    Esa explain kiya h koi neend me se bhi utha k puche to bta dunga, Waah piyush bhaiya tussi chah gae...Thank you❤

  • @shivanggupta7853
    @shivanggupta7853 ปีที่แล้ว +5

    Thankyou Piyush, for clearing my doubt on this topic , You are such a great teacher. 💖💖

  • @aadeshchhajed9848
    @aadeshchhajed9848 21 วันที่ผ่านมา

    i have learnt evrything in my tech journey from youtube , and there are many top instrctors like hitesh (chai with code) , codevolution , naamste js series but piyush is easily the best , even best amongst best, very detailed knowledge with incredible way of explanation , top tier stuff

  • @dyashwanth9822
    @dyashwanth9822 หลายเดือนก่อน

    Thank you so much bhai. Got a clear understanding of server and client rendering as well as components. Got a clear picture of when to use 'use server' & 'use client'. Thanks again ❤

  • @gauravvan
    @gauravvan ปีที่แล้ว +1

    I know some of this stuff already, but listening to this feels like listening to a story.

  • @izazahamedmallick1383
    @izazahamedmallick1383 3 หลายเดือนก่อน

    i am watched this before my interview and this diagram in my head i am super confident about this concept....thank you💛💛

  • @niteshmodi5468
    @niteshmodi5468 11 หลายเดือนก่อน +1

    Great Video Brother. Was here to know about hydration, but you made some more concepts clear

  • @HarshDoes
    @HarshDoes 3 หลายเดือนก่อน

    Thanks a lot for this video. After watching many videos, I finally understood this little jargon. Also, I developed a mental model of how I should develop components based on requirements.

  • @JashanKapoor-ug8ih
    @JashanKapoor-ug8ih 5 หลายเดือนก่อน

    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 ปีที่แล้ว

    wah kamal hogaya. Today itself I was going through the nextJs docs to understand better and viola this video pops up;

  • @JeetKRamnani
    @JeetKRamnani ปีที่แล้ว +3

    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 ปีที่แล้ว +1

    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

  • @shreyavarma9124
    @shreyavarma9124 4 หลายเดือนก่อน

    This is honestly the best explanation. Thanks!

  • @abukhalidrifat3994
    @abukhalidrifat3994 ปีที่แล้ว

    My goodness! What an explanation!!! Thank you so much bro. Take ❤

  • @amjadawan4150
    @amjadawan4150 10 หลายเดือนก่อน

    finally i understood what is client component and what is server component, Thanks dost

  • @radhasharma2407
    @radhasharma2407 5 หลายเดือนก่อน

    you literally made my concepts crystal clear 💯

  • @mukulsinghbisht2434
    @mukulsinghbisht2434 10 หลายเดือนก่อน

    how nicely you explained , i cant express it, thanks so much

  • @sameeravhad6266
    @sameeravhad6266 2 หลายเดือนก่อน

    You are too good in teaching. Thanks for your efforts to teach us. 😍

  • @joshikroshan5584
    @joshikroshan5584 10 หลายเดือนก่อน

    One of the best explanations ever👏👏👏

  • @rameesmohammed4823
    @rameesmohammed4823 ปีที่แล้ว

    Great explanation, remembering old plain php jquery way of building application.🎉

  • @shaamidrees6036
    @shaamidrees6036 10 หลายเดือนก่อน

    Bro you explained in very easy way
    Great teaching style

  • @sachityadav4141
    @sachityadav4141 9 หลายเดือนก่อน

    StraightForward, Nicely Explained!

  • @gopalbharadva1390
    @gopalbharadva1390 8 หลายเดือนก่อน

    Bro, what an explanation, 1 number.

  • @technotes721
    @technotes721 4 หลายเดือนก่อน

    you cleared my confusion Thank Piyush!

  • @noobdotx
    @noobdotx ปีที่แล้ว +1

    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😄😄🤓

  • @arushraj3807
    @arushraj3807 ปีที่แล้ว

    Your way of teaching is amazing, hats off to u❤

  • @samareshdas767
    @samareshdas767 11 หลายเดือนก่อน

    Such an in depth explanation. Thanks.😊

  • @sam_sharma24
    @sam_sharma24 5 หลายเดือนก่อน

    damn explaination of piyush are just next level

  • @irshitmukherjee7943
    @irshitmukherjee7943 ปีที่แล้ว

    Your explanations are the best so far......

  • @codeforlifehere
    @codeforlifehere ปีที่แล้ว

    To be honest, you explained it so well, just please add that slides to the description it will be of great help

  • @iqramajid8491
    @iqramajid8491 4 หลายเดือนก่อน

    Thank you so much for your amazing video .Your clear explanation really helped me understand it better.💕

  • @theuniverse8948
    @theuniverse8948 ปีที่แล้ว

    Find your Channel Yesterday and watched SSO video really grate explanation best of luck for your future

  • @mohdshahbaz574
    @mohdshahbaz574 4 หลายเดือนก่อน

    Very nice way to explain client and server components ❤

  • @learner5839
    @learner5839 ปีที่แล้ว

    Sir the way you explain us is too good. Looks like listening to a story.❤❤

  • @mrityunjaysinha
    @mrityunjaysinha ปีที่แล้ว

    Your contents are amazing Piyush!!

  • @AbdulHanan-dx3cr
    @AbdulHanan-dx3cr ปีที่แล้ว

    Great Stuff, keep making videos. Love your videos

  • @omprakashchauhan970
    @omprakashchauhan970 10 หลายเดือนก่อน

    In Depth Explanation Bro ❤
    Keep it Up 😊

  • @husnainizharkhan
    @husnainizharkhan ปีที่แล้ว

    It's completely worth it to subscribe to your channel.

  • @fullycodedtech
    @fullycodedtech 2 หลายเดือนก่อน

    love your way of teaching bro

  • @jewelthomas668
    @jewelthomas668 8 หลายเดือนก่อน

    Content delivered was amazing and thank you for the diagram comparison you showed that has helped to understand things alot 😇

  • @snehasish-bhuin
    @snehasish-bhuin ปีที่แล้ว

    Amazing explained, next topic server Action :)

  • @mongodb-hm6bl
    @mongodb-hm6bl 9 หลายเดือนก่อน

    great explanation Piyush, thank you so much for the concept clarification

  • @subhadeepbanerjee7361
    @subhadeepbanerjee7361 ปีที่แล้ว

    Informative video thanks piyush vaiya❤

  • @sadik_farhan_
    @sadik_farhan_ ปีที่แล้ว

    It was truly amazing !
    Love to see more this type of content

  • @pranavwani
    @pranavwani ปีที่แล้ว

    Very useful for understanding usage of SSR. Thanks Piyush!

  • @techrify1146
    @techrify1146 2 หลายเดือนก่อน

    Best Explaination In the Whole World !

  • @iamayushdas
    @iamayushdas ปีที่แล้ว

    Amazing Explanation brother ❤

  • @sriman45
    @sriman45 10 หลายเดือนก่อน

    Love you bro❤❤❤ Thanks for this video.

  • @powercircuitacademy
    @powercircuitacademy ปีที่แล้ว

    Amazing series sir❤ please continue 🙏🙏

  • @mayanktamrkar308
    @mayanktamrkar308 ปีที่แล้ว

    Amazing, you explained in very easy way , ❤❤❤❤

  • @asadanik5987
    @asadanik5987 ปีที่แล้ว

    That is an awesome video...take love from Bangladesh

  • @moyezrabbani637
    @moyezrabbani637 ปีที่แล้ว

    Amazing Explanation Piyush Sir.

  • @VivekSolanki-v7b
    @VivekSolanki-v7b 2 หลายเดือนก่อน

    Very nicely explained.
    Thank You.

  • @awesomeshivamshorts
    @awesomeshivamshorts 10 หลายเดือนก่อน

    Nice nice nice.....I love your teaching skill.

  • @umangbalsara2137
    @umangbalsara2137 3 หลายเดือนก่อน

    Superb Explanation👏

  • @sanketgawande3667
    @sanketgawande3667 ปีที่แล้ว

    Nicely explained, thanks 🎉

  • @rehanhas
    @rehanhas 3 หลายเดือนก่อน

    Perfectly explained ❤

  • @AryanSharma-dc4bj
    @AryanSharma-dc4bj 11 หลายเดือนก่อน

    beautiful explanation piyush

  • @AnilKumar-vp1pm
    @AnilKumar-vp1pm 9 หลายเดือนก่อน

    Amazing work and explanation!!

  • @abdullahshamoon5079
    @abdullahshamoon5079 25 วันที่ผ่านมา

    thankssss gurujji. mast explanation tha

  • @FaizSultan430
    @FaizSultan430 ปีที่แล้ว

    Great explanation Piyush thanks ❤ quality content

  • @devisinghlodhi9757
    @devisinghlodhi9757 ปีที่แล้ว

    Awesome explanation ever, ❤❤❤

  • @thrifterspoint1002
    @thrifterspoint1002 9 หลายเดือนก่อน

    V nicely explained server side rendering

  • @entrepreneurcoder2659
    @entrepreneurcoder2659 ปีที่แล้ว

    i liked the explanation.
    thanks for it
    keep bringing such informational videos

  • @SolutionHub-321
    @SolutionHub-321 ปีที่แล้ว

    Amazing tutorial. Thanks dude.

  • @yashpawar9585
    @yashpawar9585 3 หลายเดือนก่อน

    Very well explained... thanks!

  • @10zDelek
    @10zDelek ปีที่แล้ว

    the last point was important thanks for sharing

  • @kajiazadali7738
    @kajiazadali7738 14 วันที่ผ่านมา

    Great great great explanation ❤❤❤❤❤❤❤❤❤❤❤❤❤❤ thank you sir❤❤❤❤

  • @rog0079
    @rog0079 ปีที่แล้ว +4

    Now just need a nextjs project course from you which will cover all the important concepts

  • @hustler2693
    @hustler2693 8 หลายเดือนก่อน

    Excellent piyush.. ❤

  • @ProjectC-m1r
    @ProjectC-m1r 25 วันที่ผ่านมา

    Got a clear understanding of watching the video, however Thanks a lot

  • @devprajapati5673
    @devprajapati5673 7 หลายเดือนก่อน

    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🙂

  • @suyashdeshpande784
    @suyashdeshpande784 11 หลายเดือนก่อน

    26:40 but data fetching requires use of state and effect hooks , so how to make them server components

    • @AshishKumar-ft6wv
      @AshishKumar-ft6wv 10 หลายเดือนก่อน

      We don't have to make them server components.
      If we want to use states and useEffect then only we have to make the components "use client";
      Otherwise
      In the server components you can directly fetch the data. I mean you can use await and async without using useEffect

    • @suyashdeshpande784
      @suyashdeshpande784 10 หลายเดือนก่อน

      @@AshishKumar-ft6wvooh is this new method of fetching data with just async await ?

  • @saiots8651
    @saiots8651 10 หลายเดือนก่อน

    extraordinary explanation Greate brother.

  • @afrazali4141
    @afrazali4141 ปีที่แล้ว

    All doubt's clear thanks a lot bro love from pakistan

  • @gujaratinimoj3845
    @gujaratinimoj3845 ปีที่แล้ว

    Good topic sir.. very helpful this..

  • @parthghatge2423
    @parthghatge2423 ปีที่แล้ว

    Respect Man, You are too good !!!

  • @Shiv_the_human_code
    @Shiv_the_human_code ปีที่แล้ว

    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

  • @dfshoikot5904
    @dfshoikot5904 ปีที่แล้ว

    Superb Explanation

  • @talibhusain3335
    @talibhusain3335 6 หลายเดือนก่อน

    Really really Amazing video🎉

  • @charuwaka1
    @charuwaka1 10 หลายเดือนก่อน

    Client Components have access to browser APIs, like geolocation or localStorage, allowing you to build UI for specific use cases.

  • @AkshatGoyal-b5o
    @AkshatGoyal-b5o 3 หลายเดือนก่อน

    what an amazing explaination...!!!

  • @100xcoding
    @100xcoding ปีที่แล้ว

    cristal clear information thanks great content

  • @akshaysingh5535
    @akshaysingh5535 ปีที่แล้ว +3

    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 ปีที่แล้ว

      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 ปีที่แล้ว

      we can stream the data and hence the component, using suspense boundary and fallback loading component

  • @rakibulhasan992
    @rakibulhasan992 ปีที่แล้ว

    Thank you so much for your valuable video

  • @shahbazkhalid6950
    @shahbazkhalid6950 ปีที่แล้ว

    Awesome explanation.

  • @copilotcoder
    @copilotcoder ปีที่แล้ว +1

    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

  • @sumitmahajan5722
    @sumitmahajan5722 ปีที่แล้ว

    One question, at 16:00 if the components are non interactive, do they really have any js associated to them?

  • @news3951
    @news3951 2 หลายเดือนก่อน

    Thanks you Sir 🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰

  • @rajneeshmishra6969
    @rajneeshmishra6969 10 หลายเดือนก่อน

    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

  • @digitalizhar
    @digitalizhar ปีที่แล้ว +1

    Great video sir

  • @heartlessgammer7535
    @heartlessgammer7535 9 หลายเดือนก่อน

    Kafi sahi tha ❤❤❤❤❤

  • @dewanmohammademon
    @dewanmohammademon ปีที่แล้ว

    It was truly amazing !

  • @nirajbhanushali7693
    @nirajbhanushali7693 ปีที่แล้ว

    Awesome teaching

  • @pratikbade9634
    @pratikbade9634 11 หลายเดือนก่อน

    Thanks for this one ❤

  • @Dibyendu-dev
    @Dibyendu-dev ปีที่แล้ว

    Great explanation❤

  • @CodeWithKundan-h9u
    @CodeWithKundan-h9u ปีที่แล้ว

    Bro ! Loving your contents . It's my humble request to you to make a course on prisma with graphQL.

  • @AshishVermaO2O3O3
    @AshishVermaO2O3O3 4 หลายเดือนก่อน

    gajab maja aa gyaa 🤩