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
----
Want to go into further depth? Head to kodaps.dev/

[@perspective6516]

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

[@RegalWK]

SSR is about initial page only, it renders all elements and send them as pure HTML with js to hydrate it on the client side (once it’s done you have interactivity e.g. you can click a button)
Server components are about components, you can send them as react structure to the client to display some data (fetched and rendered on the server)
SSR is about whole page, and RSC is about single component

[@matiasjaliff3243]

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.

[@dawid_dahl]

Wow, great video and production. Subscribed!

[@thequang9234]

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

[@KodapsAcademy]

Glad you liked it and glad I was able to be helpful :)

[@pedroklepa]

Super didactic explanation, thank you for this.

[@KodapsAcademy]

Glad to be of service :)

[@Marcus-cf2li]

Nice explanation sir.

[@dinub8414]

Excellent work, sir

[@KodapsAcademy]

Thank you for your kind words !

[@mickomagallanes1185]

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?

[@KodapsAcademy]

The whole point of the virtual dom is to track changes in the state, and there isn’t really any server-side state (useState only works client side). But RSCs are still components structured in to a component tree. It’s just the the idea of the Virtual DOM doesn’t really apply to the server side :)

[@mickomagallanes1185]

@@KodapsAcademy yeah the tree that's what I meant, like tracking the nodes (in this case, components in server) and changing only the specific node without having to re-do the entire tree

[@4ev3r]

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

[@syedhaider0916]

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

[@dawid_dahl]

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

[@2penry2]

Agreed, I don't see how it could be SEO friendly unless the initial server render contains the entire HTML tree.

[@MrAdrien85]

Hello
Any news on that topic?

[@KodapsAcademy]

The json syntax is for server side updates, the initial render is HTML :)

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

[@luck-xc7dy]

Im pretty sure you can just do a fetch request in your client component then pass it down to the server component through props. Do note though that server components nested inside of client components automatically become client components.

[@KodapsAcademy]

Server component can be run on the client *if* there is no server-side logic to them, e.g. no data fetching going on inside them. It is kind of a waste though, if you're in a situation where you can have server components your code will be cleaner and clearer if you fetch the data from them (you can trust server components a lot more so auth is easier, you're closer to the data, and above all the data fetching becomes the responsibility of the component actually using the data). Without actually looking at your code and your tech stack it's difficult to give good advice, but at first glance it sounds like there might be a better way to go about it :)

[@RegalWK]

Server component if it’s nested inside client component (and not passed as prop) it become client component, “use client” directive is boundary to separate client side from server side.

[@bushbuddyplatypus]

wow cool, thanks

[@mohammadmolaei1402]

thank you

[@KodapsAcademy]

Glad to be of service :)

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

[@soupedenuit]

Voice volume is fine and clear.

[@27sosite73]

subscription

[@TheMaxy4u]

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?

[@KodapsAcademy]

The idea that user interactions can only be client side is a bit of an oversimplification. The best counter-example is a user registration form. It can have client-side logic for providing feedback e.g. on password strength, but the core of the behaviour is still server-side. For the todo list you might want to have some client-side interaction e.g. for rearranging the list, but if we want to store the list in a database, it makes more sense to have a server component. If you want a component with *only* client-side interaction which is not stored in a DB (.e.g opening a dropdown), then it makes sense to have it as a client-side component.

[@TheMaxy4u]

@@KodapsAcademy Thank you for the explanation. What i am actually getting at is if a Tolist contains update or delete for every items in the list. Will it be possible with a Server side component?

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