React Server Components (RSC) Rendering Functionality Part 1

1. Introduction to React Server Components (RSC)

React Server Components (RSC) introduce a new paradigm in React. They allow components to be executed on the server rather than in the browser, a significant shift from traditional client-side rendering and server-side rendering (SSR).

Key Idea: Instead of rendering everything on the client (which increases JavaScript bundle size) or rendering everything on the server (which removes interactivity), RSC combines both approaches to improve performance and maintain flexibility.

2. Why Do We Need React Server Components?

In traditional React applications, the UI is defined as: UI = f(state)

This means:

• The UI updates whenever state changes.

• Components fetch data and store it in state to update the UI.

• A fully client-rendered app re-renders components frequently as state updates.

Problems with 100% Client-Side Rendering

1. Large JavaScript Bundles

   • React apps download a lot of JavaScript to the browser.

   • This slows down performance, especially on low-end devices.

2. Client-Server Waterfalls

   • If multiple components fetch data independently, it results in sequential network requests.

   • Some components depend on data from others, causing delays in rendering.

Problems with 100% Server-Side Rendering (SSR)

• Before React, websites were fully rendered on the server (e.g., PHP, Rails).

• This approach was fast for loading data but lacked interactivity.

• Everything had to be reloaded on every request, making the user experience poor.

The Ideal Solution

What if we could combine the best aspects of both approaches?

• Keep React components on both the server and client.

• Allow interactive components to run on the client.

• Let non-interactive, data-heavy components be executed on the server.

• Reduce JavaScript sent to the browser to optimize performance.

💡 Solution: React Server Components (RSC) allow rendering logic to be split between the server and client, improving speed and interactivity.

3. What Are React Server Components?

A New Full-Stack Architecture

• RSC integrates the server as a first-class citizen in React applications.

• The server is now responsible for rendering components instead of sending raw data to the client.

• RSC acts as a bridge between the backend and front end.

Two Types of Components in RSC

Server Components

• Run only on the server and are never downloaded to the client.

• Used for fetching data directly from databases or APIs.

• It can be composed just like standard React components.

• No state or interactivity (cannot use hooks like useState or useEffect).

• Resulting in zero JavaScript bundle increase.

Client Components

• Run only in the browser.

• Handle user interaction (buttons, forms, etc.).

• Can import and use other client components.

• Must opt in using "use client" at the top of the file.

When Do Server Components Re-Render?

Unlike client components, server components do not re-render due to state updates. Instead, they re-execute when:

1. Navigation occurs (URL changes) → A new request to the server triggers a fresh execution.

2. The user triggers a re-fetch (e.g., form submission, query update).

3. Parent server component updates→ If a higher-level component needs re-execution, its children will also update.

💡 Key Difference: Client components re-render whenever the state changes, while server components re-render when the URL changes or data is re-fetched.

Final Thoughts

React Server Components introduces a new rendering approach that optimizes React applications by dividing execution between the server and the client. By understanding when and how rendering takes place, developers can enhance performance, decrease JavaScript load, and streamline data fetching.