Markdown

RSC

RSC is the Acronym for React Server Components

A newer architecture that allows components to be rendered exclusively on the server, React Server Components (RSC) enable developers to mix server-only components with client-side interactive components within the same tree. Unlike traditional Server-Side Rendering (SSR), which renders entire pages on the server, RSCs allow for more granular control, enabling components to be rendered on the server while others remain interactive on the client.

How RSC Works

  • Server Execution: Server Components execute only on the server, providing direct access to backend resources such as databases and file systems.
  • Refined Payload: Instead of sending HTML, RSCs send a specialized JSON-like description of the UI to the client.
  • Zero Bundle Size: The code for Server Components remains on the server, reducing the amount of JavaScript sent to the user. Only the code for Client Components (marked with 'use client') is sent to the browser.

RSC Characteristics

  • Performance: Drastically reduces the amount of JavaScript sent to the user, improving load times and overall performance.
  • Direct DB Access: Allows developers to write async/await directly inside components to fetch data, streamlining data access.
  • No Hydration for RSCs: Since Server Components don't re-render on the client, they don't require hydration, saving CPU cycles.

Table: SSR vs. RSC

FeatureServer-Side Rendering (SSR)React Server Components (RSC)
OutputRaw HTML stringA serialized UI tree (JSON-like)
JS BundleIncludes code for the whole pageOnly includes code for Client Components
StateCan use hooks (after hydration)Cannot use hooks (State, Effects)
InteractivityBecomes fully interactivePrimarily for data fetching/layout

RSC is part of React (also known as React.js or ReactJS), a free and open-source front-end JavaScript library maintained by a community of individual developers and companies. Governed by the React Foundation, an independent foundation hosted by the Linux Foundation, React is one of the most commonly used web technologies. It can be used to develop single-page, mobile, or server-rendered applications with frameworks like Next.js and React Router. Because React is only concerned with the user interface and rendering components to the DOM, React applications often rely on libraries for routing and other client-side functionality. A key advantage of React is that it only re-renders those parts of the page that have changed, avoiding unnecessary re-rendering.