What are React Server Components (RSC)?

React Server Components allow part of your component tree to be rendered on the server. This means some components never need to run on the client, improving performance by reducing JavaScript sent to the browser.

Key features:

1. Faster initial load by offloading work to the server.
2. Less client-side JavaScript needed.
3. Seamless combination of SSR and client components in one app.

Core Concepts of React Server Components

1. Server vs Client Components

Server Components: Run only on the server (no access to browser APIs like localStorage or window).

Client Components: Run on the client and have access to browser APIs.

2. File Naming

1. server.jsx: Server components.
2. .client.jsx: Client components.

3. Data Fetching on the Server

You can fetch data directly inside server components, which reduces the need for client-side state management or data-fetching hooks.

When to Use RSC?

For heavy data-fetching components (e.g., dashboards with large datasets).

For static content like blogs or product pages that don’t need frequent interaction.

To reduce JavaScript on the client for faster page loads.