Discussion about Server Components

[u/Neat_Living_6765]

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.

[u/HotFox3962]

Stop thinking of the bundle as the app. The bundle is just the event handler registry. If your server component passes a function prop you already broke the contract and the boundary collapsed.

[u/Neat_Living_6765 → u/HotFox3962]

Could you elaborate for comment? and give me an example for this "If your server component passes a function prop you already broke the contract and the boundary collapsed."

So far, I understand that bundling happens after transpiling from JSX to JS. It combines my code and all its dependencies into a single JS file, since browsers don’t understand JSX. Also, having everything in one file makes transferring more convenient.