React Server Components (RSC) is revolutionizing front-end architecture. You may have heard the name, but do you know exactly how it differs from SSR (server side rendering) and what kind of processing is going on behind the scenes? In this article, we will take a deep dive into its technical mechanism and consider examples of its practical use.
Definitive difference from SSR
Conventional SSR was a technology that generated HTML on the server side during the initial load and returned it to the browser. But then the browser had to load JavaScript and re-run (hydrate) the component to make it interactive. In other words, the component code itself was ultimately being downloaded to the browser.
RSC, on the other hand, is a component that runs only on the server and is never sent to the browser. After the RSC is processed by the server, it is serialized into a special JSON-like format rather than HTML and sent to the client. The browser side simply receives this data and reflects it in the DOM.
Dramatic reduction in bundle size
The biggest benefit of this mechanism is a reduction in the size of the JavaScript bundle sent to the client side.
For example, suppose you want to use a heavy library (such as marked) that converts markdown to HTML. If you implement this with RSC, all parsing is done on the server, so no heavy library code is downloaded to the user’s browser. This is a revolutionary improvement in performance for mobile environments.
Client Boundary design is key.
The most troublesome thing when working with RSC is designing the boundaries between server and client components.
Since RSC runs on the server, it cannot have event handlers such as onClick or state management (useState). Only the end components (buttons and input forms) that require them should be made client components.
A tree structure design philosophy is required in which ``data acquisition and heavy processing are performed in the upper layer of the tree (server), and only the leaf portions that require user operations are used as clients.''
Practical usage examples
In practice, RSC shines brightest in the following use cases:
- Blog and media article display: Like the Markdown conversion mentioned above, RSC is unique in rendering static content.
- Direct database access: Since RSC is a server environment, you can securely send queries directly to the database. Since one API layer can be omitted, development effort can be saved.
- SEO-focused landing pages: Fast initial loads and no extra JS, which directly improves your Core Web Vitals score.
RSC is not intended to replace the existing React, but is a new weapon to clarify the “division of roles” between client and server. Correctly understanding this mechanism and incorporating it appropriately into the design will be the key to future front-end development.