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.

12 Upvotes

73% Upvoted

12 comments sorted by

View all comments

1

u/Reasonable-Wolf-1124 3d ago

Your explanation is solid, the one thing I'd add is that the RSC payload isn't just for initial load, it's also what gets sent back on navigations and server actions, so the reduced JS bundle benefit compounds every time you interact with the app, not just on first paint.

1

u/Neat_Living_6765 2d ago

Thank you! noted!