React Server Components vs Client Components

Подписаться 172 тыс.

Просмотров 25 тыс.

50% 1

Hey Everyone, In this video, we are going to take a look at React Server components and NextJS 14. We'll see what server components are how they are different from normal React Client Component and how they are different from Next's Server Side Rendering.
Quick Links
Full Stack Twitter Clone learn.piyushga...
Master Docker learn.piyushga...
Video Titles
- What are React Server Components?
- What are NextJS Server Components?
- NextJS App Directory
- Server Side Rendering vs Server Components.
Hashtags
#react #reactjs #nextjs #webdevelopment #fullstackwebdevelopment #fullstackdevelopers #nextjs14 #opensource

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

27 сен 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 162

@tishukr930 10 месяцев назад

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

@HarshDoes 7 дней назад

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.

@izazahamedmallick1383 22 дня назад

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

@shivanggupta7853 10 месяцев назад

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

@gauravvan 10 месяцев назад

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

@JeetKRamnani 10 месяцев назад

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 💞💗

@hersheynaik3029 10 месяцев назад

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

@niteshmodi5468 8 месяцев назад

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

@technotes721 Месяц назад

you cleared my confusion Thank Piyush!

@sam_sharma24 2 месяца назад

damn explaination of piyush are just next level

@gopalbharadva1390 5 месяцев назад

Bro, what an explanation, 1 number.

@iqramajid8491 Месяц назад

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

@mohdshahbaz574 Месяц назад

Very nice way to explain client and server components ❤

@amjadawan4150 7 месяцев назад

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

@shaamidrees6036 7 месяцев назад

Bro you explained in very easy way Great teaching style

@technologygadget6570 10 месяцев назад

Mindblowing style of teaching Specially the diagram 🤯🤯

@codeforlifehere 10 месяцев назад

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

@shreyavarma9124 Месяц назад

This is honestly the best explanation. Thanks!

@omprakashchauhan970 7 месяцев назад

In Depth Explanation Bro ❤ Keep it Up 😊

@rog0079 10 месяцев назад

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

@radhasharma2407 2 месяца назад

you literally made my concepts crystal clear 💯

@theuniverse8948 10 месяцев назад

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

@awesomeshivamshorts 7 месяцев назад

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

@learner5839 10 месяцев назад

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

@AnilKumar-vp1pm 6 месяцев назад

Amazing work and explanation!!

@umangbalsara2137 6 дней назад

Superb Explanation👏

@abukhalidrifat3994 9 месяцев назад

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

@devprajapati5673 4 месяца назад

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🙂

@10zDelek 10 месяцев назад

the last point was important thanks for sharing

@rehanhas 22 дня назад

Perfectly explained ❤

@pranavwani 10 месяцев назад

Very useful for understanding usage of SSR. Thanks Piyush!

@AryanSharma-dc4bj 9 месяцев назад

beautiful explanation piyush

@jewelthomas668 5 месяцев назад

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

@mukulsinghbisht2434 7 месяцев назад

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

@yashpawar9585 Месяц назад

Very well explained... thanks!

@husnainizharkhan 10 месяцев назад

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

@sachityadav4141 6 месяцев назад

StraightForward, Nicely Explained!

@iamayushdas 9 месяцев назад

Amazing Explanation brother ❤

@mongodb-hm6bl 6 месяцев назад

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

@AshishVermaO2O3O3 Месяц назад

gajab maja aa gyaa 🤩

@digitalizhar 10 месяцев назад

Great video sir

@snehasish-bhuin 10 месяцев назад

Amazing explained, next topic server Action :)

@gujaratinimoj3845 10 месяцев назад

Good topic sir.. very helpful this..

@joshikroshan5584 7 месяцев назад

One of the best explanations ever👏👏👏

@dfshoikot5904 9 месяцев назад

Superb Explanation

@irshitmukherjee7943 10 месяцев назад

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

@afrazali4141 10 месяцев назад

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

@saiots8651 7 месяцев назад

extraordinary explanation Greate brother.

@sriman45 7 месяцев назад

Love you bro❤❤❤ Thanks for this video.

@mrityunjaysinha 10 месяцев назад

Your contents are amazing Piyush!!

@powercircuitacademy 10 месяцев назад

Amazing series sir❤ please continue 🙏🙏

@entrepreneurcoder2659 10 месяцев назад

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

@dewanmohammademon 9 месяцев назад

It was truly amazing !

@AbdulHanan-dx3cr 9 месяцев назад

Great Stuff, keep making videos. Love your videos

@mayanktamrkar308 10 месяцев назад

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

@heartlessgammer7535 6 месяцев назад

Kafi sahi tha ❤❤❤❤❤

@samareshdas767 8 месяцев назад

Such an in depth explanation. Thanks.😊

@moyezrabbani637 10 месяцев назад

Amazing Explanation Piyush Sir.

@talibhusain3335 3 месяца назад

Really really Amazing video🎉

@devisinghlodhi9757 10 месяцев назад

Awesome explanation ever, ❤❤❤

@100xcoding 10 месяцев назад

cristal clear information thanks great content

@nirajbhanushali7693 10 месяцев назад

Awesome teaching

@Shiv_the_human_code 10 месяцев назад

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

@amitdubey2209 10 месяцев назад

best till now!!

@subhadeepbanerjee7361 10 месяцев назад

Informative video thanks piyush vaiya❤

@CodeWithKundan-h9u 10 месяцев назад

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

@rakibulhasan992 9 месяцев назад

Thank you so much for your valuable video

@charuwaka1 7 месяцев назад

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

@b5fw6jg7 10 месяцев назад

Please explain inline "use server" and server actions as well.

@saiots8651 7 месяцев назад

I am waiting for the next js course with typescript and redux toolkit query from piyush bhai.

@FaizSultan430 10 месяцев назад

Great explanation Piyush thanks ❤ quality content

@alihassan4726 8 месяцев назад

Excelent Explaination

@SolutionHub-321 10 месяцев назад

Amazing tutorial. Thanks dude.

@vipultejyan1575 8 месяцев назад

Great explanation

@md_asharaf Месяц назад

superb video

@nirbhayvora3497 10 месяцев назад

very informative video

@vaibhavwadhavane874 10 месяцев назад

please make a full nextjs course with one full stack project

@harkeshyadav2959 10 месяцев назад

Wonderfull video brother. I have one question if server components are rendered on server side only then how the data of server components will be transfered from server to the browser previously it was coming inside the js bundle but now as it is removed from js bundle then how tstatic html of that which dont have interactability will come to browser? Because if we inspect in browser we will the html tree of that server component but as you mentioned it will not come in js bundle then how browser is recieving that?

@asifurrahman5436 9 месяцев назад

it will receive as json like data

@SarvadShetty Месяц назад

well explained

@sadik_farhan_ 10 месяцев назад

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

@iamabhhilashdk 8 месяцев назад

Great Video :)

@Dibyendu_das_96 10 месяцев назад

Great explanation❤

@shailesh2001bxr Месяц назад

this is very helpful for SSR and CSR for understood and one thing tell me that whenever we have multiple event and actions then we will create a separate file for clicking or any actions ?.

@aditimahabole1761 8 месяцев назад

you aree the besttttttttt wowwwwwww

@darklord9500 10 месяцев назад

Can you explain about webpack, bable etc.

@MrRaj-rz5po 10 месяцев назад

Bhaiya indexing explain kardo momgoDB mai

@parthghatge2423 10 месяцев назад

Please create video for Server Actions

@RishiRajxtrim 10 месяцев назад

Gratitude!!🙂🙏💯

@sircillavenkatesh1458 10 месяцев назад

hi piyush bro, please make a video on how to resolve CSP(Content security Policy) in nextjs. Iam getting that error while integrating custom stripe payment in my application

@kushalkumar-shaw 2 месяца назад

I need your full stack web developer course please ..❤❤❤❤

@ramendrasoni3368 10 месяцев назад

worker.forEach is not a function ये कम नहीं करता एक पेज पर और दुसरे पेज पर यही कम करता है... कैसे, क्या समस्या हो सकती है |

@webcodeexplainedYT 5 месяцев назад

Why we need to download entire bundle at once in CSR can't be lazily loaded ?

@Riteshk_007 10 месяцев назад

Sir next auth ke uper ek video bna do please hindi me

@Prathamesh-o6n 10 месяцев назад

sir pls ek next js 14 ka course upload karo where the server actions , api fetching ,etc pura explain kiya ho

@shubhankartrivedi 10 месяцев назад

nextJS 14 is not a very major update so there is no need. Just server actions is new major feature which was already on nextJS 13 but unstable.

@Prathamesh-o6n 10 месяцев назад

@@shubhankartrivedi yeah bro i know that but he have not made any video on server actions, etc thats why i am saying

@Prathamesh-o6n 10 месяцев назад

@@shubhankartrivedi server actions api url fetching through POST method by sending body parameters its not there in any video can u help pls

@shubhankartrivedi 10 месяцев назад

@@Prathamesh-o6n read nextJS 14 server action docs

@imvivekkushwaha 10 месяцев назад

Hi I use node js for backend and save token in localstorage during localstorage. This is making an issue with calling the API on the server side. How I can handle this

@shubhankartrivedi 10 месяцев назад

Can you explain more? so I can help out

@suyashdeshpande784 8 месяцев назад

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

@AshishKumar-ft6wv 8 месяцев назад

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 8 месяцев назад

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