ReactJS ~React Server Components~

Source: Dev.to

Overview

React Server Components (RSC) are a new type of React component that runs solely on the server and sends only the resulting UI structure to the browser.
In traditional React, JavaScript runs in the browser to render the UI. With RSC, the processing is split between the server and the client, offering several advantages.

Key Features of RSC

• Reduced browser load – Rendering is completed on the server, so the amount of JavaScript sent to the browser is significantly lower.
• Faster data retrieval – Direct access to databases and file systems on the server eliminates unnecessary API request round‑trips.
• Enhanced security – Confidential information such as private keys and API tokens never reaches the browser and can be processed securely on the server.

Division of Roles Between Server and Client

React will use two distinct component types:

Server Component

• Where executed: Server
• Primary purpose: Data retrieval, database access, utilization of large libraries.

Client Component

• Where executed: Browser
• Primary purpose: Interactive operations (clicks, form input), usage of useState and similar client‑side hooks.

Differences from SSR

• SSR (Server‑Side Rendering): The server generates the entire page’s initial HTML markup.
• RSC (React Server Components): Components run exclusively on the server. When combined with SSR, they enable faster and more efficient site construction.