React Server Components Made Easy(With Examples and Demo)

In this video, we will learn about React Server Component(RSC) and its importance. We'll also discuss how RSCs are important prerequisites for starting with Next.js.
If you're new to React and want to learn about React Server Components, this video is for you! We'll cover everything you need to know about React Server Components and how they can help you build more efficient and robust apps.
We will learn the concepts using various examples and a demo.
Let's GO 🚀
Timecodes
0:00 - React Server Component as a New Concept.
02:07 - React as a Client Side UI Library
04:02 - It's Time To Think Differently: Problems
05:39 - The User Experience Issue: Layout Shift
09:07 - The Water Fall Problem
11:44 - The Problem With Code Maintainability
14:31 - The Cost: For You and The Customers
16:02 - Understand The Client Server Things
17: 27 - How ReactJS Client Components Work(Visually)
19:53 - Understanding React Server Components(Visually)
22:35 - The React Server Components and The Component Tree
26:53 - Can I Use Only Server Components?
28:56 - Let's Build. React Server Component Demo
40:48 - Recap: Whatever We Learned
42:40 - The End and What's Next?
🤝 My Links:
- Blog: blog.greenroots.info/
- Twitter: / tapasadhikary
- LinkedIn: / tapasadhikary
- Showwcase: www.showwcase.com/atapas398
👋 Like my work? Thank You. You can sponsor me from here:
- GitHub Sponsor: github.com/sponsors/atapas
- Sponsor my Blog: blog.greenroots.info/sponsor
Credits:
- A WaterFall Image was used from freepick.
- The background music is used from elegant-ambient-science from PixBay.
- The Demo Shown in The Video may use Code Snippet from FREE online tutorials for the UI Components.
About Me:
Tapas Adhikary is an Educator, Tech enthusiast, Writer, KZbinr, and Open Source projects maintainer/contributor. He is a full-stack developer who has vast experience in building SaaS solutions. He is the Head of Content at Showwcase. He is a founder of the ReactPlay platform, which is driven by Open Source projects and a fast-growing community.
You can find more about him at tapasadhikary.com.

[@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! 😍💛♥💛

[@deepdrops]

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

[@tapasadhikary]

Thanks a lot 👍

[@user-ky3bl4ft4q]

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 😊

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

[@kennyng1238]

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

[@tapasadhikary]

That’s great 😍

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

[@RajendraPatha]

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

[@tapasadhikary]

Most welcome

[@prashlovessamosa]

You are the best. Thanks for this clear explanation.

[@tapasadhikary]

Thanks brother 💛

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

[@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 :)

[@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. 😍💛❤💛

[@syfuddhinahmed2290]

Great! I understand next.js better now.

[@tapasadhikary]

Great, great ❤️

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

[@saugatrajbhandari4247]

great explanation as always

[@tapasadhikary]

Thanks a lot. 🧡❤🧡

[@rhafaelbijaksana9996]

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 🙂😍

[@ahsanshafiqshawon]

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

[@tapasadhikary]

Thank you very much vai ❤️

[@souvikmandal3991]

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

[@tapasadhikary]

Thank You, vai 💛❤💛

[@gagandeepsinghinvingagan]

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.

[@nothingtowatch4311]

thank you sir

[@saikatsen7589]

Excellent Explanation Dada ❤

[@tapasadhikary]

Thanks a lot, Saikat.

[@MasudRana-ro2zn]

Amazing explanation Dada.

[@tapasadhikary]

Always welcome

[@MdAbdullah-cs7xh]

It's really awesome as you.

[@tapasadhikary]

Thank you vai ❤️

[@IbrahimSowunmi]

Great video

[@tapasadhikary]

Thank you!

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

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

[@NewsInsightsbyCharlie]

Thank you, Dada.

[@tapasadhikary]

Welcome, vai

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

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

[@akshaypatil8393]

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

[@tapasadhikary]

You are most welcome, Akshay!

[@harshsinha7642]

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

[@tapasadhikary]

You bet. Planning a course soon 💛

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

[@farhadjaman5580]

awesome just awesome

[@tapasadhikary]

Glad you liked it, yay 🥳

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

[@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"?

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

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

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

[@Dibyendu_das_96]

✅

[@tapasadhikary]

🙏

[@faiquejatu8649]

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

[@tapasadhikary]

Yes in plan

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