React Server Components Made Easy(With Examples and Demo)

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

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

  • @naijabuzz300
    @naijabuzz300 ปีที่แล้ว +7

    I cant wait for this channel to get the recognition and awareness it deserves. I am speechless. Thanks for your awesome videos as always. Let's get this channel to 100K subscribers guys, to also help other developers find this content and help them out.

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

      Thanks a lot, for this unconditional support and love ❤️. I wish my content reached many 😊

  • @palakbasak3551
    @palakbasak3551 4 หลายเดือนก่อน +1

    What an explanation. I have never seen this kind of videos on nextjs. Thank you so much.❤

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

      @@palakbasak3551 wow, Thanks a lot ❤️

  • @briandacallos4234
    @briandacallos4234 3 หลายเดือนก่อน +1

    You've just clear all the confusions over my head about this, thank you auto subs!

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

      Thanks a ton for the support… glad you found it helpful… ❤️

  • @nightmarenar666
    @nightmarenar666 4 หลายเดือนก่อน +1

    Your React js tutorial is helped me for clearing the one of the product based company. Thank you so much for your valuable time to teach us. Now i'm watching NextJS with more curios and Waiting for 'jest & RTL' unit testing playlist.
    I could say your a very good tutor. your explaining each and every concepts, neat and clear & crisp to understand easily.

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

      @@nightmarenar666 wow, congratulations 🎉… I'm very happy for you 🙌

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

    Amazing explanation. This is by far one of the best React server component explanation I have seen.

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

      Wow! Your feedback means a lot to me. Thank you! 😍💛♥💛

  • @RajendraPatha
    @RajendraPatha 7 หลายเดือนก่อน +1

    Easy to understand and well structured. Thank you for great explanation sir.

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

    This tutorial explain straight to the point and simplify the core of react server component. That super helpful for me thank you

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

    This is a fantastic explanation! It's incredibly clear and the best RSC I've ever come across.

  • @kennyng1238
    @kennyng1238 ปีที่แล้ว +2

    Thank you, this is much more clear to me right now. Great job!

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

    Sir very good explanation. I like the way you take realtime problems and issues and explain according to that how we should work, instead of just explaining the core codes. I was looking for such kind of tutorial videos and very happy that I found it.

    • @tapasadhikary
      @tapasadhikary  29 วันที่ผ่านมา

      Glad you found the approach helpful! ❤️

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

    Very good explanation!

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

    Excellent Explanation Dada ❤

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

    I was not clear about what SSR and RSC were until I watched this video. It provided such informative content. Hats off for the effort. I can now go and start learning Next.js without having any doubts about CSR and SSR. Also, I am a subscriber now to this channel. :D

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

      You are most welcome Kaushik 😊

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

      @@tapasadhikary Please create a Next.js tutorial playlist if possible. It would be more helpful, as I believe all the tutorials on TH-cam are a bit outdated, recorded when Next.js was in beta mode or when the App router wasn’t fully released.

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

      @kaushikchopra3149 It’s already started. 5 videos are there already , 3 more coming this month…

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

      @@tapasadhikary Thank you. I'll check those videos and start learning Next.js by today itself.

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

    Please create a playlist for optimization in Next.js.

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

    Hats off Sir. You cleared all of my confusions. A well deserved subscriber earned

    • @tapasadhikary
      @tapasadhikary  9 หลายเดือนก่อน +1

      You are most welcome ❤️. Thanks a lot for subscribing, means a lot.

  • @SumanKundu-v7e
    @SumanKundu-v7e ปีที่แล้ว +1

    I learned so much concept in so little time. The way of explanation is amazing. Thank you for providing such quality content.

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

      Very glad that you liked it 💛. Thanks for watching and more such in-depth knowledge coming 😊

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

    This is great content, dhonnobad Dada❤️❤️💐

  • @Invingagan
    @Invingagan ปีที่แล้ว +2

    It is a great explaination about the server side component. After seeing this it looks promising to use that.
    At the same time a question is coming to my mind. As now a days, most of the applications make call based on the user logged in. They need to pass token to ensure the correct user and authoriazarion level. That is part is still not clear as we removed that layer in server side component. Probabely it will be clear when we will this more in application.

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

      Hey Gagan, Thanks! Please start using it.
      Your use case is very much possible with the server-side components, and in fact, it is now possible in a much more secure way than ever, as those API Keys and secrets never passed over wires with the server components.
      I want to correct one thought process there if you don't mind me doing it! We haven't removed any layer there... we just saying now your components can directly interact with the server-side of things.
      I would suggest, you play around with RSC more, and I would be glad to discuss more with you as you unfold things! Cheers.

  • @taiseen-ai
    @taiseen-ai ปีที่แล้ว

    Just amazing...
    we are to much gratefully to you for your this video... 🤗
    such a nice and easy way you explain those concepts are really amazing... & very much easy to understand... 👍
    Thank you so much to creating video like these behind the screen for us... 💖

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

    Resourceful and in-depth explanations. Thank you so much for your initiative. Looking forward to going through with this playlist. Keep up the good work sir.

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

      Thanks dear, Nargis. Yes, this is my dream playlist 😀

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

    This one is an extremely informative video. One of the best React Server Component videos on the internet. Big thanks to you. ❤❤❤

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

      A comment like this makes the whole effort of video making worth it. Thanks, my friend, it means a lot to me. 😍💛❤💛

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

    Great! I understand next.js better now.

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

    Amazing information shared. I have not seen this kind of quality content so far. ❤❤

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

      Thanks a lot for letting me know that it added value to you. I am very happy.

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

    Thankyou bro, i have read next and react documentation but i got a frustated, and then i just read you article in freecode, you explain is very amazing bro

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

      that's a huge comment. Thanks a lot 🙂😍

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

    You are the best.
    Thanks for this clear explanation.

  • @MasudRana-ro2zn
    @MasudRana-ro2zn 9 หลายเดือนก่อน +1

    Amazing explanation Dada.

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

    great explanation as always

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

    one fo the best explaination by far on server component! Please attach the link to the demo code you have shown in the video. It would help us dig more into it.
    Thanks!

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

      You are most welcome 👍

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

    Nice and very clear explanation. Please try to make a video about Server action. Currently, I am using it but there is a problem. To get the loading state, I have to use a react hook given by the Next JS. Therefore I have to use server action in a client component. It would be great if we can use the server action in the server component for progressive enhancement form in the real-world scenario.
    Anyway, your explanation of "server action" would be a great refresher on these new concepts.

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

      Very cool.
      I've created an article on server action on my blog already. Shall create a video as well.

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

    আমি লার্ন উইথ সুমিত এর রিঅ্যাক্ট এক্সিলারেটর কোর্সে আছি। এই কোর্সে এনরোল করে আপনাকে চিনেছি, আমি মনে করি এই কোর্স থেকে পাওয়া সবচেয়ে দামি বিষয় এটাই। আপনার চ্যানেলের মিলিয়নস অফ সাবস্ক্রাইবার হওয়া উচিত বলে মনে করি। সিনট্যাক্স শেখাই যায় কিন্তু কেন সেটা শিখবো, কেন কোড করবো, মেন্টাল মডেল ইত্যাদি এই বিষয়গুলো আমার চিন্তাভাবনা বদলে দিয়েছে। আপনাকে অসংখ্য ধন্যবাদ কমিউনিটিতে অবদান রাখার জন্য। আপনার ভালো ভালো কাজগুলো টিকে থাকুক এবং সামনে আরও আসতে থাকুক এই কামনা করি। ভালো থাকবেন, হয়তো অনলাইন দুনিয়া থেকে একদিন অফলাইন দুনিয়ায় আপনার সাথে দেখা হয়ে যাবে এই আশা ব্যক্ত করে আজকের মতো আসি।

    • @tapasadhikary
      @tapasadhikary  10 หลายเดือนก่อน +1

      Thank you very much vai ❤️

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

    Amazing content very helpful when learn nextJs app router. Just a quick question does nextJs automatically convert server component to client component if we use states or event handler?

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

      Thank you!
      The answer to your question, No it doesn't. It will cry with error if you try to use hook, handlers, etc.. in a server component. The error will ask you to use the 'use client' directive to make a client component manually.

  • @justin9494
    @justin9494 5 หลายเดือนก่อน +2

    Thank you so much!

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

      You are most welcome.

  • @sohansingh2022
    @sohansingh2022 4 หลายเดือนก่อน +1

    Fantastic!

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

      @@sohansingh2022 thanks!

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

    Sir I want to see in inspect that when you use a server components as props in an client component then does that server component renders in the browser in inspect. Please can you give example and show me . Also I really love your teaching style, I have seen all 39 videos of react from you and I have built a react application on e- commerce myself and deployed on render but I have some doubts , can I have some one on one time with you. Thanks in advance. I am in Dallas Texas, new enthusiast in web development. You’re just an awesome teacher. Thanks

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

    Amazing explanation🥰
    Please create a playlist on nextjs in details 🙏

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

      You bet. Planning a course soon 💛

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

    Hi Tapas da, Are you planning to upload any more lessons in this series? Many thanks for the videos!!

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

    Thank you, Dada.

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

    @tapas sir. I am happy to finish your react course here.. I am excited about your nextjs crash course. Thank you sir. I will watch your others videos after this one while waiting for nextjs. any advise from you what playlist shall i watch next?

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

      Congratulations… I would suggest you start building things using all learning. Nextjs series first video will drop this week.

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

    Great video, though i didn't understand one thing that is why server components work inside a client component if we pass them through props ?

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

      Thanks, Harsh!
      Is your question "Why" or "How"?

  • @IbrahimSowunmi
    @IbrahimSowunmi 7 หลายเดือนก่อน +1

    Great video

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

    Thank you sir........................................................

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

      You are most welcome, Akshay!

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

    Bro, you just made my day! your explanation is fantastic! already subscribed. Btw bro, can i ask why in Next js 14 we make a provider as self tagging not wrap the child like the old version??
    Before next js 14
    const Layout = ({ children }) => {
    return (

    {children}

    );
    };
    after next js 14 it came up like this:

    {children}
    The notable difference lies in the use of self-tagging, where children and other components are not explicitly wrapped inside the provider.
    Could someone provide more details about this? I'll apreaciate it!

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

      Hey bro, I'm glad you liked the content and thanks a lot for the support and subscription ❤️
      Coming to your question: Even with APP Router, we can very much wrap children in the provider. In fact, that's the use case. The providers are usually client components. So you can only use the server components as the prop children to it.
      I have recently created a video demonstrating it. I would like to request you to take a look: th-cam.com/video/kKJIBbuW5wk/w-d-xo.htmlsi=mKHVoEmuEv6f6T9l
      Please check the section where I create the provider and use it in the layout. You can also find the code in the video description. Hope it helps.

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

    It's really awesome as you.

  • @baylonyap1113
    @baylonyap1113 4 หลายเดือนก่อน +1

    The best ever!

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

      Glad you find it helpful.

  • @SLTeenTails
    @SLTeenTails 8 หลายเดือนก่อน +1

    thank you sir

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

    Thank you Sir

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

    awesome just awesome

  • @akash.serene
    @akash.serene ปีที่แล้ว +1

    how to debug server components in case of any failure?
    as we do client component in browser

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

      Using VS CODE. Video is coming on it

  • @mdsumonh.shohan9159
    @mdsumonh.shohan9159 4 หลายเดือนก่อน

    Tapash vai great ekta question Nextjs er sathe mongoDB and other database query use kore ki everything kora possible?

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

      Define “everything”

  • @DK-ox7ze
    @DK-ox7ze ปีที่แล้ว +1

    Can we pass data from a server component to a client component? If yes then how is that data transferred to the client component? Is it done when client component is rendered? If so then there must be a network call to send this data to the client component.

    • @tapasadhikary
      @tapasadhikary  ปีที่แล้ว +2

      It's a great question!
      Yes, you can pass data from the server components to the client component. But it is not like server components transfer the data to the client side for the client component to render. Rather Server sends the entire serializable React tree in a format that has two things:
      1) The server components rendered to tags.
      2) The client components turned to placeholders(along with their id, props, etc)
      When browser receives this serializable JSON like tree, it reconstructs the React tree so that everything renders on the browser. Here the client placeholders turns back into the components. Now the rendering takes place.
      I hope it is clear now.

    • @DK-ox7ze
      @DK-ox7ze ปีที่แล้ว

      @@tapasadhikary I see. But I didn't understand why React/Next doesn't allow components requiring click handlers to be rendered on server? React can render them on server and attach click handlers when hydrating components on client side.

    • @Aleks-fp1kq
      @Aleks-fp1kq ปีที่แล้ว +1

      @@DK-ox7ze because that cannot be the same function as the server component's code must stay on the server. Even if you re-create the function you would lose the scope in which the function was created on the server.

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

    Hello sir, can you post a video to explain server actions

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

    it is important to serialized the videos. as a beginner people can't understand what to see after which video?

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

      Let me help you. The natural progression is to start learning Nextjs App router and that's why this video is already part of the NextJS series. Feel free to take a look
      Full Stack with NextJS App Router
      th-cam.com/play/PLIJrr73KDmRwz_7QUvQ9Az82aDM9I8L_8.html

  • @Dibyendu-dev
    @Dibyendu-dev 10 หลายเดือนก่อน +1

  • @BDHDVIDEO
    @BDHDVIDEO 6 หลายเดือนก่อน +1

    start a new mission brother

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

    Very nice explanation

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

      Many thanks to you.

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

    Sir I want to see in inspect that when you use a server components as props in an client component then does that server component renders in the browser in inspect. Please can you give example and show me . Also I really love your teaching style, I have seen all 39 videos of react from you and I have built a react application on e- commerce myself and deployed on render but I have some doubts , can I have some one on one time with you. Thanks in advance. I am in Dallas Texas, new enthusiast in web development. You’re just an awesome teacher. Thanks

    • @tapasadhikary
      @tapasadhikary  3 หลายเดือนก่อน +1

      @@JourneyOfADesi done! I will explain that in a video soon. Thanks for acknowledging that my content helps you!
      We can connect on Topmate in a 1:1 call. If interested I shall share my topmate profile with you to book a mentoring slot. Thanks ☺️