React Client and Server Components, SSR, CSR and Hydration

February 24, 2025

Today I was learning about React Server Components, React Client Components, Server-Side Rendering, Client-Side Rendering, and Hydration. Here's my understanding:

1. React Client Components: Just the normal React components. They can use useState, useEffect hooks, and have interactivity. They get rendered on the server to produce a static (dry) HTML, then on the client, they hydrate to attach event listeners and interactivity. In a purely client-side rendered app, they render only in the browser so they aren’t necessarily rendered twice in every setup.

2. React Server Components: Only ever render on the server, can't use state, effects, or other browser APIs. Main benefits are:

   • They can directly access backend resources (like a database) super fast.
   • Since they never get shipped to the client, the JS bundle size is reduced.
   • As these components run solely on the server, they help offload data fetching and heavy computations.

3. Server-Side Rendering (SSR): Builds the complete HTML on the server and sends it to the client, kind of like template engines such as Jinja. Benefits:

   • The client doesn't have to wait long to see the content.
   • Even with SSR, if interactive client components are present, they still need hydration to become fully interactive.

4. Client-Side Rendering (CSR): Sends a minimal HTML page with <script> tags; the client fetches the JS from the server and builds the complete HTML page. This can feel slower initially because the UI is constructed only after the JS loads and executes.

5. Hydration: Sends a dry HTML page dry as in static with basic structure. The HTML has <script> tags, so the client downloads the JS, builds a virtual DOM of components (with state, effects, etc.), and then efficiently merges with the existing DOM to hydrate it with interactivity and dynamic content rather than doing a full re-render.