React Server Components Made Easy(With Examples and Demo)

[@naijabuzz300]

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]

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

[@LearnwithSumit]

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

[@tapasadhikary]

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

[@nightmarenar666]

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]

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

[@palakbasak3551]

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

[@tapasadhikary]

@@palakbasak3551 wow, Thanks a lot ❤️

[@briandacallos4234]

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

[@tapasadhikary]

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

[@deepdrops]

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

[@tapasadhikary]

Thanks a lot 👍

[@phucong2760]

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

[@tapasadhikary]

I am so glad hearing that :)

[@SumanKundu-v7e]

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

[@tapasadhikary]

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

[@kaushikchopra3149]

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]

You are most welcome Kaushik 😊

[@kaushikchopra3149]

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

[@tapasadhikary]

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

[@kaushikchopra3149]

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

[@RajendraPatha]

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

[@tapasadhikary]

Most welcome

[@chaipanch98]

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]

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.

[@kennyng1238]

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

[@tapasadhikary]

That’s great 😍

[@rhafael04]

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]

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

[@leonhossain8324]

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

[@tapasadhikary]

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

[@JourneyOfADesi]

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

[@Invingagan]

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]

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.

[@nargisakther4721]

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]

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

[@yashsolanki069]

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]

You are most welcome 👍

[@syketb]

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

[@tapasadhikary]

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

[@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... 💖

[@tapasadhikary]

Appreciate your comment.

[@ahsanshafiqshawon]

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

[@tapasadhikary]

Thank you very much vai ❤️

[@sakkhor]

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]

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

[@abhinavmathur5869]

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

[@tapasadhikary]

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

[@saikatsen7589]

Excellent Explanation Dada ❤

[@tapasadhikary]

Thanks a lot, Saikat.

[@syfuddhin]

Great! I understand next.js better now.

[@tapasadhikary]

Great, great ❤️

[@harshshukla7675]

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]

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

[@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]

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: kzbin.info/www/bejne/oXytenWYqrxorc0si=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.

[@prashlovessamosa]

You are the best. Thanks for this clear explanation.

[@tapasadhikary]

Thanks brother 💛

[@souvikmandal3991]

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

[@tapasadhikary]

Thank You, vai 💛❤💛

[@murwathmehtar861]

Very good explanation!

[@sublimeelectrons8699]

@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]

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

[@PatrickBateman_speaks]

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

[@tapasadhikary]

Surely I’m. I’m making one on Suspense in React.

[@PatrickBateman_speaks]

@@tapasadhikary thanks dada

[@justin9494]

Thank you so much!

[@tapasadhikary]

You are most welcome.

[@saugatrajbhandari4247]

great explanation as always

[@tapasadhikary]

Thanks a lot. 🧡❤🧡

[@MasudRana-ro2zn]

Amazing explanation Dada.

[@tapasadhikary]

Always welcome

[@sohansingh2022]

Fantastic!

[@tapasadhikary]

@@sohansingh2022 thanks!

[@mdsumonh.shohan9159]

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

[@tapasadhikary]

Define “everything”

[@akshaypatil8393]

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

[@tapasadhikary]

You are most welcome, Akshay!

[@baylonyap1113]

The best ever!

[@tapasadhikary]

Glad you find it helpful.

[@akash.serene]

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

[@tapasadhikary]

Using VS CODE. Video is coming on it

[@harshsinha7642]

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

[@tapasadhikary]

You bet. Planning a course soon 💛

[@NewsInsightsbyCharlie]

Thank you, Dada.

[@tapasadhikary]

Welcome, vai

[@SolutionHub-321]

It's really awesome as you.

[@tapasadhikary]

Thank you vai ❤️

[@SLTeenTails]

thank you sir

[@IbrahimSowunmi]

Great video

[@tapasadhikary]

Thank you!

[@DK-ox7ze]

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]

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]

@@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]

@@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.

[@farhadjaman5580]

awesome just awesome

[@tapasadhikary]

Glad you liked it, yay 🥳

[@harshkhasgiwale2709]

Thank you Sir

[@tapasadhikary]

Welcome!

[@revulation1971]

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

[@tapasadhikary]

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 kzbin.info/aero/PLIJrr73KDmRwz_7QUvQ9Az82aDM9I8L_8

[@faiquejatu8649]

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

[@tapasadhikary]

Yes in plan

[@Dibyendu-dev]

✅

[@tapasadhikary]

🙏

[@BDHDVIDEO]

start a new mission brother

[@tapasadhikary]

On it, bro 😀

[@gogilavanivasanthakumar7283]

Very nice explanation

[@tapasadhikary]

Many thanks to you.

[@JourneyOfADesi]

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]

@@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 ☺️