React Server Components See Gradual Adoption

- React Server Components were first introduced by the React team, maintained by Meta, in December 2020 as a research and development feature to enable zero-bundle-size components. - The primary motivation behind RSCs is to improve performance by reducing the amount of JavaScript sent to the client, which can lead to faster initial page loads, especially on slower networks or devices. In early studies, the React team reported potential bundle size reductions of 18-29%. - Unlike traditional Server-Side Rendering (SSR) which renders HTML on the server and then "hydrates" it with JavaScript on the client, Server Components run exclusively on the server and their code is never sent to the browser. - This server-only execution allows RSCs to directly access server-side resources like databases, file systems, or internal APIs without needing to build a separate API endpoint for the client to fetch from. - The most prominent adoption of React Server Components is within the Next.js framework, starting with its "App Router" architecture which uses RSCs by default. - A key architectural rule is that Server Components can render and import Client Components (interactive UI), but Client Components cannot import Server Components, establishing a clear boundary. - Adoption challenges include a significant "mental model shift" for developers accustomed to client-side rendering, as they must now distinguish between server and client environments. - The implementation of RSCs currently has limited options outside of major frameworks like Next.js due to the deep integration required with bundlers.