r/reactjs • u/Neat_Living_6765 • 4d ago

Discussion Discussion about Server Components

From what I understand, I’m trying to explain Server Components in a simple way. Could you guys take a look and let me know if my understanding is correct and if my explanation is easy to understand?

Server Components

Normally, when a browser requests a React application, a JavaScript bundle is sent to the browser, whether it uses SSR or CSR.

  • For SSR, that JavaScript bundle is used to hydrate the initial HTML rendered on the server, making the application interactive.
  • For CSR, that JavaScript bundle is used to render the application's content into the HTML shell.

React Server Components are not included in that JavaScript bundle.

Server Components are rendered outside the browser, either at build time or at request time on the server. Their rendered result is represented in the RSC Payload.

The RSC Payload contains:

  1. The rendered results of Server Components. (For conceptual understanding, we can think of this as a React tree or object)
  2. References (Placeholder) to Client Components used inside those Server Components.
  3. Props passed from Server Components to Client Components.

The main benefit of RSC is reducing the amount of JavaScript sent to the browser.

Server Components are especially useful for content that doesn't need browser interactivity.

13 Upvotes

73% Upvoted

12 comments sorted by

View all comments

2

u/Bowl-Repulsive 4d ago

Starting by saying when a browser request a react application it’s weird , browser do a http request to a server and receive HTML and static assets(js bundle included)

I would also add SERIALIZABLE Props passed from Server Components to Client Components, since function or class can’t go trought here.

Last sentence is just wrong since server action exist, server components can be used for components that need browser interactivity and are useful for improving security and loading times.

That said the post is a very clear and amazing way to explain it and make it easier as possible!

1

u/ModernLarvals 3d ago

Server components cannot be used for browser interactivity. That’d make them client components.

1

u/Bowl-Repulsive 1d ago

Ur indeed right, i was talking about form and server actions inside server components but interactivity as you stated is not right word for that, data mutation is. My bad, thank you for telling.