React Server Components vs SSR: What Changed?

React Server Components (RSC) and traditional Server-Side Rendering (SSR) both run code on the server, but they solve different problems: SSR renders the entire HTML page on the server, while RSC lets you fetch data and render individual components on the server, sending a special format that the client hydrates selectively. This shift matters because it reduces the JavaScript sent to the browser, improves performance on slow devices, and changes how developers structure data fetching and state management.

Background: How Web Rendering Evolved

In the early 2010s, most web apps were either fully server-rendered (PHP, Ruby on Rails) or fully client-rendered (Backbone, AngularJS). React popularized the client-side approach: the server sends an empty HTML shell, and JavaScript builds the entire page in the browser. This made interactions smooth but hurt initial load times and SEO because the content wasn’t visible until JavaScript executed.

Traditional SSR (often called “universal” or “isomorphic” rendering) was the first major fix. The server runs React to produce complete HTML, which the browser displays immediately, then React “hydrates” the page by attaching event handlers. This solved the blank-page problem but still shipped the full component code and all data-fetching logic to the client. Every interactive component, even a simple button, required its JavaScript bundle to be downloaded and executed.

React Server Components, introduced experimentally in 2020 and stabilized in React 19, take a different approach: they allow components to run exclusively on the server, with no client-side JavaScript at all. The server fetches data, renders the component, and sends a serialized description of the output. The client only receives the minimal JavaScript needed for interactive parts.

How Traditional SSR Works

In traditional SSR, the server runs the entire React tree for each request. A typical flow:

• The server receives a request and fetches data (often in getServerSideProps in Next.js or a similar function).
• It renders the whole app to HTML strings using renderToString.
• It sends that HTML plus the full JavaScript bundle to the client.
• The browser displays the HTML immediately, then downloads and executes the bundle to hydrate the page.

This means every component, even those that never need to re-render, has its JavaScript shipped to the client. For a page with a large chart or a heavy library, that bundle can be several megabytes. The server also does all data fetching in one block, which can delay the first byte if one query is slow.

How React Server Components Work

RSC flips the model: components are marked as either Server Components (default) or Client Components (with a 'use client' directive). Server Components run only on the server, can directly access databases and file systems, and can import server-only libraries without bloating the client bundle. They send a special format (not HTML, but a serialized React element tree) that the client uses to render the UI.

Client Components are the only ones that ship JavaScript. They can still be rendered on the server for initial HTML, but they also include their code for hydration and interactivity. The key difference: you can nest Client Components inside Server Components, and the server will pre-render them, but the client only downloads the JavaScript for those specific components, not the whole tree.

For example, a page with a product list and a “Add to Cart” button could have the list as a Server Component (fetching directly from the database) and the button as a Client Component. The browser receives the rendered list HTML and only the button’s JavaScript, not the entire product data-fetching logic.

Key Differences: Data Fetching and State

The most significant change is where data fetching happens. In SSR, data is typically fetched in a page-level function and passed down as props. In RSC, each Server Component can fetch its own data directly, using async functions. This enables more granular caching and parallel data fetching.

State management also differs. In SSR, all components can use hooks like useState and useEffect because they run on the client. In RSC, Server Components cannot use any hooks that require state or effects; they are purely presentational and data-fetching. This forces developers to be explicit about what is interactive, which often leads to better separation of concerns.

Another difference: SSR sends HTML, which is great for SEO and first paint, but the client must still hydrate the entire tree. RSC sends a JSON-like format that includes both the rendered output and instructions for where to place Client Components. This format is smaller than the full JavaScript bundle, and the client only hydrates the parts that need it.

Performance and Bundle Size Impact

The main performance win of RSC is the reduction in JavaScript. A page that uses RSC can have 30-60% less JavaScript than the same page using traditional SSR, especially if it uses heavy libraries like date-fns, lodash, or charting tools. Those libraries can be imported only in Server Components, so their code never reaches the browser.

This matters most on low-end mobile devices, where parsing and executing JavaScript can take seconds. Even on desktop, less JavaScript means faster time-to-interactive. RSC also improves server response times by allowing data fetching to happen in parallel across components, rather than sequentially in a single page-level function.

However, RSC is not always faster. If a page is almost entirely interactive (like a complex spreadsheet or a real-time dashboard), the overhead of splitting components might not help. Also, the initial HTML from RSC can be slightly larger than traditional SSR because it includes the serialized format, though this is usually offset by the smaller JavaScript.

When to Use Which: A Practical Guide

There is no one-size-fits-all answer. Here are factors to consider:

• Content-heavy pages (blogs, product listings, docs): RSC is ideal. Most of the page is static or server-fetched, so you can minimize client JavaScript.
• Highly interactive apps (dashboards, editors, social feeds): Traditional SSR or even client-side rendering might be simpler. RSC can still work, but you’ll need to carefully move interactive parts to Client Components.
• SEO-critical pages: Both work, but RSC provides the same SEO benefits as SSR since the server returns rendered content.
• Existing codebase: If you have a large SSR app, migrating to RSC is incremental. You can start with one component and gradually convert.

Frameworks like Next.js have integrated RSC as the default in the App Router. If you’re starting a new project, RSC is the recommended path. For existing Pages Router apps, traditional SSR remains fully supported.

Common Misconceptions and Pitfalls

A frequent misconception is that RSC replaces SSR entirely. In reality, RSC is an addition; the server still renders HTML for initial load, but the client hydration is more targeted. Another misconception is that Server Components can’t use any JavaScript. They can, but only server-side JavaScript. They cannot use hooks or event handlers.

A common pitfall is accidentally importing a client-only library into a Server Component. For example, using useState in a Server Component throws an error. The fix is to add 'use client' at the top of the file. Another pitfall: passing a function from a Server Component to a Client Component as a prop is not allowed unless it’s a Server Action. This can trip up developers used to passing callbacks.

Also, RSC changes how you think about caching. Server Components can be cached at the component level, but you need to be careful about dynamic data. Most frameworks provide fetch-level caching, but you must configure it correctly to avoid stale data.

Frequently Asked Questions

Do React Server Components work with Next.js?

Yes, Next.js has integrated RSC as the default in its App Router since version 13.4. The Pages Router still uses traditional SSR. If you’re using Next.js, you can mix both: use Server Components in the App Router and keep the Pages Router for legacy pages.

Can I use React Server Components with TypeScript?

Absolutely. RSC is fully compatible with TypeScript. You’ll need to use the 'use client' directive at the top of Client Component files, and TypeScript will enforce the rules (e.g., no hooks in Server Components) at compile time. Most frameworks like Next.js have built-in TypeScript support.

What is the difference between SSR and RSC in terms of SEO?

Both produce server-rendered HTML that search engines can crawl. RSC’s serialized format is not sent to the client as-is; the server also generates HTML for the initial view. So SEO is identical to traditional SSR. The main difference is the reduced JavaScript, which can improve Core Web Vitals like LCP and TBT, indirectly benefiting SEO.

Is RSC a replacement for client-side rendering?

No, RSC is not a replacement. Client-side rendering is still necessary for highly interactive parts of an app. RSC is a complementary technique that allows you to keep most of your app on the server while still having client-side interactivity where needed. You can use RSC for the static parts and Client Components for the dynamic parts.

How do I handle forms with RSC?

Forms in RSC can use Server Actions, which are functions that run on the server when the form is submitted. You can define an async function in a Server Component and pass it to a Client Component’s action prop. This avoids writing separate API routes for simple form submissions.

What are the downsides of RSC?

The main downsides are the learning curve and the mental model shift. You need to think about what runs where, and debugging can be trickier because errors may occur on the server. Also, some libraries that rely on browser APIs won’t work in Server Components, so you may need to find alternatives or wrap them in Client Components.

Related

• Windrose Grave Locations & Shipwreck Walkthrough
• FiveM b2372 GTA Crash Error: Fixes
• Direct Connect to a Space Engineers Server