Тёмный

React Server Components Made Easy(With Examples and Demo) 

tapaScript by Tapas Adhikary
Подписаться 21 тыс.
Просмотров 14 тыс.
50% 1

Опубликовано:

 

12 сен 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 108   
@naijabuzz300
@naijabuzz300 9 месяцев назад
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 9 месяцев назад
Thanks a lot, for this unconditional support and love ❤️. I wish my content reached many 😊
@LearnwithSumit
@LearnwithSumit Год назад
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! 😍💛♥💛
@palakbasak3551
@palakbasak3551 28 дней назад
What an explanation. I have never seen this kind of videos on nextjs. Thank you so much.❤
@tapasadhikary
@tapasadhikary 28 дней назад
@@palakbasak3551 wow, Thanks a lot ❤️
@nightmarenar666
@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
@tapasadhikary Месяц назад
@@nightmarenar666 wow, congratulations 🎉… I'm very happy for you 🙌
@deepdrops
@deepdrops Год назад
This is a fantastic explanation! It's incredibly clear and the best RSC I've ever come across.
@tapasadhikary
@tapasadhikary Год назад
Thanks a lot 👍
@rhafaelbijaksana9996
@rhafaelbijaksana9996 11 месяцев назад
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 11 месяцев назад
that's a huge comment. Thanks a lot 🙂😍
@Invingagan
@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
@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.
@user-ky3bl4ft4q
@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
@tapasadhikary Год назад
Very glad that you liked it 💛. Thanks for watching and more such in-depth knowledge coming 😊
@syketb
@syketb Год назад
This one is an extremely informative video. One of the best React Server Component videos on the internet. Big thanks to you. ❤❤❤
@tapasadhikary
@tapasadhikary Год назад
A comment like this makes the whole effort of video making worth it. Thanks, my friend, it means a lot to me. 😍💛❤💛
@ahsanshafiqshawon
@ahsanshafiqshawon 6 месяцев назад
আমি লার্ন উইথ সুমিত এর রিঅ্যাক্ট এক্সিলারেটর কোর্সে আছি। এই কোর্সে এনরোল করে আপনাকে চিনেছি, আমি মনে করি এই কোর্স থেকে পাওয়া সবচেয়ে দামি বিষয় এটাই। আপনার চ্যানেলের মিলিয়নস অফ সাবস্ক্রাইবার হওয়া উচিত বলে মনে করি। সিনট্যাক্স শেখাই যায় কিন্তু কেন সেটা শিখবো, কেন কোড করবো, মেন্টাল মডেল ইত্যাদি এই বিষয়গুলো আমার চিন্তাভাবনা বদলে দিয়েছে। আপনাকে অসংখ্য ধন্যবাদ কমিউনিটিতে অবদান রাখার জন্য। আপনার ভালো ভালো কাজগুলো টিকে থাকুক এবং সামনে আরও আসতে থাকুক এই কামনা করি। ভালো থাকবেন, হয়তো অনলাইন দুনিয়া থেকে একদিন অফলাইন দুনিয়ায় আপনার সাথে দেখা হয়ে যাবে এই আশা ব্যক্ত করে আজকের মতো আসি।
@tapasadhikary
@tapasadhikary 6 месяцев назад
Thank you very much vai ❤️
@kaushikchopra3149
@kaushikchopra3149 8 месяцев назад
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 8 месяцев назад
You are most welcome Kaushik 😊
@kaushikchopra3149
@kaushikchopra3149 8 месяцев назад
@@tapasadhikary Please create a Next.js tutorial playlist if possible. It would be more helpful, as I believe all the tutorials on RU-vid are a bit outdated, recorded when Next.js was in beta mode or when the App router wasn’t fully released.
@tapasadhikary
@tapasadhikary 8 месяцев назад
@kaushikchopra3149 It’s already started. 5 videos are there already , 3 more coming this month…
@kaushikchopra3149
@kaushikchopra3149 8 месяцев назад
@@tapasadhikary Thank you. I'll check those videos and start learning Next.js by today itself.
@nargisakther4721
@nargisakther4721 11 месяцев назад
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 11 месяцев назад
Thanks dear, Nargis. Yes, this is my dream playlist 😀
@phucong2760
@phucong2760 9 месяцев назад
This tutorial explain straight to the point and simplify the core of react server component. That super helpful for me thank you
@tapasadhikary
@tapasadhikary 9 месяцев назад
I am so glad hearing that :)
@abhinavmathur5869
@abhinavmathur5869 Год назад
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.
@RajendraPatha
@RajendraPatha 3 месяца назад
Easy to understand and well structured. Thank you for great explanation sir.
@tapasadhikary
@tapasadhikary 3 месяца назад
Most welcome
@JourneyOfADesi
@JourneyOfADesi 2 дня назад
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
@kennyng1238
@kennyng1238 11 месяцев назад
Thank you, this is much more clear to me right now. Great job!
@tapasadhikary
@tapasadhikary 11 месяцев назад
That’s great 😍
@souvikmandal3991
@souvikmandal3991 Год назад
This is great content, dhonnobad Dada❤️❤️💐
@tapasadhikary
@tapasadhikary Год назад
Thank You, vai 💛❤💛
@sakkhor
@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
@tapasadhikary Год назад
Very cool. I've created an article on server action on my blog already. Shall create a video as well.
@leonhossain8324
@leonhossain8324 5 месяцев назад
Hats off Sir. You cleared all of my confusions. A well deserved subscriber earned
@tapasadhikary
@tapasadhikary 5 месяцев назад
You are most welcome ❤️. Thanks a lot for subscribing, means a lot.
@syfuddhinahmed2290
@syfuddhinahmed2290 9 месяцев назад
Great! I understand next.js better now.
@tapasadhikary
@tapasadhikary 9 месяцев назад
Great, great ❤️
@prashlovessamosa
@prashlovessamosa Год назад
You are the best. Thanks for this clear explanation.
@tapasadhikary
@tapasadhikary Год назад
Thanks brother 💛
@yashsolanki069
@yashsolanki069 8 месяцев назад
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 8 месяцев назад
You are most welcome 👍
@taiseen-ai
@taiseen-ai 10 месяцев назад
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
@tapasadhikary 10 месяцев назад
Appreciate your comment.
@harshshukla7675
@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
@tapasadhikary Год назад
Thanks, Harsh! Is your question "Why" or "How"?
@justin9494
@justin9494 2 месяца назад
Thank you so much!
@tapasadhikary
@tapasadhikary 2 месяца назад
You are most welcome.
@iamjustlearner5866
@iamjustlearner5866 9 месяцев назад
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 9 месяцев назад
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: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-kKJIBbuW5wk.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.
@chaipanch98
@chaipanch98 10 месяцев назад
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 10 месяцев назад
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.
@saugatrajbhandari4247
@saugatrajbhandari4247 Год назад
great explanation as always
@tapasadhikary
@tapasadhikary Год назад
Thanks a lot. 🧡❤🧡
@sohansingh2022
@sohansingh2022 Месяц назад
Fantastic!
@tapasadhikary
@tapasadhikary Месяц назад
@@sohansingh2022 thanks!
@akshaypatil8393
@akshaypatil8393 Год назад
Thank you sir........................................................
@tapasadhikary
@tapasadhikary Год назад
You are most welcome, Akshay!
@sublimeelectrons8699
@sublimeelectrons8699 11 месяцев назад
@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 11 месяцев назад
Congratulations… I would suggest you start building things using all learning. Nextjs series first video will drop this week.
@MasudRana-ro2zn
@MasudRana-ro2zn 6 месяцев назад
Amazing explanation Dada.
@tapasadhikary
@tapasadhikary 5 месяцев назад
Always welcome
@saikatsen7589
@saikatsen7589 10 месяцев назад
Excellent Explanation Dada ❤
@tapasadhikary
@tapasadhikary 10 месяцев назад
Thanks a lot, Saikat.
@baylonyap1113
@baylonyap1113 Месяц назад
The best ever!
@tapasadhikary
@tapasadhikary Месяц назад
Glad you find it helpful.
@harshsinha7642
@harshsinha7642 Год назад
Amazing explanation🥰 Please create a playlist on nextjs in details 🙏
@tapasadhikary
@tapasadhikary Год назад
You bet. Planning a course soon 💛
@IbrahimSowunmi
@IbrahimSowunmi 4 месяца назад
Great video
@tapasadhikary
@tapasadhikary 4 месяца назад
Thank you!
@SLTeenTails
@SLTeenTails 4 месяца назад
thank you sir
@SolutionHub-321
@SolutionHub-321 10 месяцев назад
It's really awesome as you.
@tapasadhikary
@tapasadhikary 10 месяцев назад
Thank you vai ❤️
@farhadjaman5580
@farhadjaman5580 10 месяцев назад
awesome just awesome
@tapasadhikary
@tapasadhikary 10 месяцев назад
Glad you liked it, yay 🥳
@mdsumonh.shohan9159
@mdsumonh.shohan9159 16 дней назад
Tapash vai great ekta question Nextjs er sathe mongoDB and other database query use kore ki everything kora possible?
@tapasadhikary
@tapasadhikary 16 дней назад
Define “everything”
@NewsInsightsbyCharlie
@NewsInsightsbyCharlie Год назад
Thank you, Dada.
@tapasadhikary
@tapasadhikary Год назад
Welcome, vai
@PatrickBateman_speaks
@PatrickBateman_speaks Год назад
Hi Tapas da, Are you planning to upload any more lessons in this series? Many thanks for the videos!!
@tapasadhikary
@tapasadhikary Год назад
Surely I’m. I’m making one on Suspense in React.
@PatrickBateman_speaks
@PatrickBateman_speaks Год назад
@@tapasadhikary thanks dada
@DK-ox7ze
@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
@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
@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 Год назад
@@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.
@akash.serene
@akash.serene Год назад
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
@harshkhasgiwale2709
@harshkhasgiwale2709 2 месяца назад
Thank you Sir
@tapasadhikary
@tapasadhikary 2 месяца назад
Welcome!
@revulation1971
@revulation1971 10 месяцев назад
it is important to serialized the videos. as a beginner people can't understand what to see after which video?
@tapasadhikary
@tapasadhikary 10 месяцев назад
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 ru-vid.com/group/PLIJrr73KDmRwz_7QUvQ9Az82aDM9I8L_8
@faiquejatu8649
@faiquejatu8649 Год назад
Hello sir, can you post a video to explain server actions
@tapasadhikary
@tapasadhikary Год назад
Yes in plan
@Dibyendu_das_96
@Dibyendu_das_96 7 месяцев назад
@tapasadhikary
@tapasadhikary 7 месяцев назад
🙏
@BDHDVIDEO
@BDHDVIDEO 2 месяца назад
start a new mission brother
@tapasadhikary
@tapasadhikary 2 месяца назад
On it, bro 😀
@gogilavanivasanthakumar7283
@gogilavanivasanthakumar7283 Месяц назад
Very nice explanation
@tapasadhikary
@tapasadhikary Месяц назад
Many thanks to you.
@JourneyOfADesi
@JourneyOfADesi 2 дня назад
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 2 дня назад
@@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 ☺️
Далее
React Server Components: A Comprehensive Breakdown
52:42
Вопрос Ребром - Булкин
59:32
Просмотров 1,1 млн
iPhone 16 для НИЩЕБРОДОВ!
00:51
Просмотров 2,1 млн
All 17 React Best Practices (IMPORTANT!)
1:46:11
Просмотров 130 тыс.
10 common mistakes with the Next.js App Router
20:37
Просмотров 211 тыс.
Every React Concept Explained in 12 Minutes
11:53
Просмотров 623 тыс.
Loading Your React Data Like This is Awesome
13:27
Просмотров 109 тыс.
Modal in Next.js & React | Create a Dialog Component
22:57