React Server Components Change Everything

React server components, also known as RSC, are the biggest game changer for React since hooks and may even surpass hooks in my opinion. Server components completely alter how you write React code and in this video I will talk about all the difference between client and server components, what the pros and cons are, as well as when to use each one.

📚 Materials/References:

🌎 Find Me Here:

⏱️ Timestamps:

00:00 - Introduction
00:45 - Basic Differences
03:23 - Server Component Benefit #1
05:22 - Server Component Benefit #2
06:32 - Server Component Benefit #3
07:58 - Server Component Benefit #4
08:25 - Server Component Benefit #5
08:58 - Server Component Downside #1
10:25 - Server Component Downside #2
10:45 - How To Nest Server And Client Components

[Juloass]

So now we doing JS the PHP's way that i learned 10 years ago ? Great, it wasn't a waste of time after all ! =D

[baka_baca]

The old ways have become "new" again.

Then we'll be hooked on this for a while, realize all the problems with the approach, move back to the client for everything, and the cycle will continue.

[Just.Alexander]

No, I'm sorry this stuff is better off as a separate npm package that people can add to their project if they want and react/nextjs people should stop herding people to use NextJS on the official React docs.

Let the front-end be the front-end, server be the damn server, and NextJS be whatever it's supposed to be.

And regarding google's recent changes for SEO I doubt the SEO benefit is gonna be there in the future. So 2 medium benefits for a big constant headache. And don't get me started on the decision to implement features that are in Canary stage, meaning not final, in NextJS. No thank you.

[mluu]

BRO, why are you using promising chaining with async await?!?! come on, man

[huytran-ewgg]

As a beginner in React, I should say this is getting out of hand, NextJs everytime docs changes is a whole new-scenario, not to mention the bug comes with it, then now React is updating with these new features and to be honest, a newbie like myself would like to learn basis and be able to understand all the based knowledge correctly first, not some mixing stuff like this.

[javascriptexpanse]

We exist: developers who use pure react and haven't been pushed by peer pressure to learn nextjs. by the time you'll be done with nextjs another framework called 'lastjs' will emerge. i advice stick with one framework as long as it is working for you. switching between between frameworks has zero benefits

[prionkor]

How does it change "Everything"?? What is the point of this title? Can you explain? It changes NOTHING! You still need to fetch data from frontend. Server components has its place but not needed everywhere.

[andrewshaban]

Sorry, I don't understood. Does this only work with Next.js or with pure React as well?

[juancamacho]

am i the only one confused about the video title? this is just a next tutorial i guess, or am i missing something he sais abou how to do it in react?

[iammakimadog]

Can you make a video about caching in Next.js and how to disable them? The caching is too aggressive and hard to understand.

[pallavggupta]

Great video as always …State management in next js and how to use data between clients and server using zustand and or any other way ? Can we please have a video on that

[lrsvolk]

Clickbaite title as usual 😢
Server components are not an alternative for the hooks

[TheLexuguin]

One of the aspects I find most interesting is composability. In traditional Server-Side Rendering (SSR) apps, you must fetch all data from the server at the route level. However, with React Server Components (RSC), you can fetch data at the component level. Additionally, the ability to mutate data and then perform revalidation ensures your RSCs are always up to date.

[ryangamv]

What you said about server components vs client components and SEO is not strictly true. Client components can still be prerendered and hydrated, which is what happens in Next

[Gohealt]

React is a circus ;) only good for YouTubers :D

[adtc]

Why would I want "cached data that's available to every single user"? Sure, in simple websites, okay because everyone sees the same data. But web services, each user can only see their own data, not the data of other users. So I don't really understand the "benefit" there.

[coder_one]

ReactServerComponents - a feature that exists exclusively in the React-Vercel world.

[TeaBroski]

Did you guys try it? Is it me or it's really slow, and your website ends up showing skeletons for seconds? Am I doing something wrong?
Do you find your vercel snappy? I don't honestly, hopeful to get some replies

[rajdippal]

If you are not using next js. react-query is a good option for data fetching and state management.

[Dabayare]

React only attractive to ppl with ADHD or repetitive compulsive disorder. ITgey rewrite their apps once every year n good luck to the companies giving u such time n resources.