React Server Components vs SSR

What’s the difference, in React, between Server-Side Rendering and Server Components?

For a while, I had trouble identifying the difference between the two. It kept bothering me.

On the surface, both seem very similar. They both happen on the server. They’re both intended to render content faster.

However, the documentation for server components explains that these technologies serve different purposes and operate at different levels. The two concepts are independent. You can have Server-Side Rendering (or SSR) without Server Components and Server Components without SSR. (And, of course, you can have both or neither.)

So, how can we understand the difference between the two?

The day I understood the difference between the two was when I focused on what is _different_ in the two names, not what is similar. That might sound stupidly obvious, but trust me, it makes sense. Let me explain.

#reactjs #nextjs

----

[perspective]

This is only video that helped me to understand server components easily. Thanks man

[matiasjaliff]

Awesome explanation!! BTW, I loved your style, the light of the video and the way you speak; it's like you were delivering a poem.

[mankekejhoty]

My opinion is that when a concept is very difficult to explain it is because something doesn't sound right. But your explain this two concept very very well.

[thequang]

Damn this was a good watch. Thank you sir for spreading your knowledge : )

[justafreakable]

Wow documentry style programing videos. definetly subbing.

[pedro-eu-mesmo]

Super didactic explanation, thank you for this.

[dawid_dahl]

Wow, great video and production. Subscribed!

[ALLAOUAOKBA]

Great explanation.
I've just one question: what happens when a components that should not be client (server) for example that have only jsx with no interactivity or smth is marked with a use client label at the top of the file, will this lead that the mentioned component in a (pseudo logic) will be mounted to the html via JavaScript bundle or in all cases it will be pre rendered/generated on the server

Also does the terminology "pre-render" always exits with RSC, because I'm confusing between the idea of mounting the html code from js and the prerender thing (take the initial values of the useState to generate initial html)

[evr]

I love the way you explain things, really reminds me of Marco Pierre White. Subscribed!

[mickomagallanes]

wow this is superb and icing on the cake after researching this topic for days, finally I can sleep well. My question is Server Components are like Virtual DOM in the server? Like they are literally components in the React server who have its own virtual DOM?

[dawid_dahl]

Could you please explain why SEO is not affected by streaming in that weird JSON-like syntax?

[syedhaider]

Good work, you did say that SOMEWHERE javascript deserializes the streamable text, is that SOMEWHERE what we call the EDGE environment?

[Sindoku]

You have got a good video with great content here, however, I feel that your voice audio is way too low and it’s making it very difficult for me to concentrate on what you are saying please consider increasing the volume of your voice relative to everything else. Thank you.

[TheMaxyu]

I have read somewhere that any components that has user interaction like click or anything shiuld not be a server component. However, in your exMple you have todo component as server component which i am speculating would have user events involved. Please correct me if my understanding is wrong?

[lakshkataria]

Is it possible to fetch data on a client side component and feed it down to a server side component? Now that I think about it, I have no idea why the app I’m building is structured like that but it might just be down to not having enough understanding of the concepts

[CYTOTIMUS]

Without an explanation of how the RSC work it all looks like a magic and nothing is clear. So rendering a RSC produces some kind of a data structure, what's next? How this data structure is used to update the client components in the browser?