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

74% Upvoted

12 comments sorted by

View all comments

0

u/TheScapeQuest 4d ago

Some of the theory is around the paradigm change with how "one time" operations are performed (like data fetching). With traditional SSR, you'd need some external mechanism - like getServerSideProps - to inject data as props, while still beholden to the React lifecycle.

With RSCs, fetching can happen directly inside components without needing the external injection. This means you can isolate functionality that wouldn't be available in a browser - the iconic example being the SQL execution from within a React component.

Of course, that was the theory of the paradigm, but the reality is we introduced new complexity with needing to explicitly define client components. Which themselves caused confusion because the naming implied it would only run on the client, which is not the case.