What are React Server Components and why part of the UI runs on the server

Hook

React Server Components, or RSC, are a way to build UI so that part of the component tree runs on the server and part of it runs in the browser. For beginners, it can still look like normal React, but the important difference is where the UI is created and delivered from.

In short: server components let you send ready-made UI to the browser without shipping unnecessary JavaScript. This is especially visible in the Next.js App Router, where one screen often combines server and client components.

A simple mental model

Think of a page as a set of blocks.

• Some blocks can be assembled on the server because they do not need clicks, local state, or access to window.
• Other blocks must live in the browser because they react to events, manage state, render forms, or drive animations.

That is why RSC does not mean “everything runs on the server”. It means you can split the interface into two responsibilities and avoid putting the entire screen into one big client bundle.

Where beginners meet this in practice

You usually see RSC in these places:

• The app/ directory in Next.js App Router.
• Pages that can prepare data on the server before the browser receives HTML.
• Components that read from a database, call an API, or assemble static markup.
• Screens where part of the tree is server-rendered and buttons, filters, or forms are client components.

If you are learning Next.js, RSC are not a special trick. They are a core part of the modern rendering model.

Why RSC matter

There are a few practical benefits:

• Less JavaScript reaches the browser.
• Faster initial page experience for the user.
• Cleaner separation between data fetching and interactive UI.
• Better control over where each part of the interface runs.

For learning, this is useful because it trains you to ask not only “how do I build this component?” but also “where should this component run?”

Common mistakes

Beginners often make these mistakes:

1. Confusing RSC with SSR.
   • SSR describes a server rendering strategy.
   • RSC describes the component model and the server-client boundary.
2. Adding "use client" everywhere.
   • That can erase the benefits of server components.
3. Putting browser-only code inside a server component.
   • For example, window, local state, or event handlers.
4. Failing to isolate interactive parts.
   • Buttons, forms, and filters are often better as small client components.

Quick checklist before you commit

• Does this component really need the browser?
• Can the data be prepared on the server?
• Did I turn the whole page into a client component unnecessarily?
• Is the interactive part clearly separated?
• Am I using browser-only APIs in a server component?

Summary

RSC are a way to build React interfaces without forcing everything into the browser. For beginners, the core idea is simple: the server prepares what it can ahead of time, and the browser handles what needs interaction.