{"id":48940,"date":"2024-08-28T07:00:00","date_gmt":"2024-08-28T14:00:00","guid":{"rendered":"https:\/\/dhblog.dream.press\/blog\/?p=48940"},"modified":"2026-08-25T09:22:15","modified_gmt":"2026-08-25T16:22:15","slug":"react-server-components","status":"publish","type":"post","link":"https:\/\/www.dreamhost.com\/blog\/react-server-components\/","title":{"rendered":"React Server Components: The Future of React Development"},"content":{"rendered":"\n

Here\u2019s a myth worth busting: React components don\u2019t have to run in the browser. React Server Components (RSCs) are React components that render on the server and send only their rendered output to the browser, shipping none of their own JavaScript.<\/strong> They became stable in React 19 (December 2024), and Next.js supports them out of the box.<\/p>\n\n\n\n

React has been widely used to build web apps for more than a decade<\/a>.<\/p>\n\n\n\n

We\u2019ve all seen it evolve from class components to hooks.<\/p>\n\n\n\n

But React Server Components (RSCs)?<\/p>\n\n\n\n

We don\u2019t think anyone expected such a big change in how React worked.<\/p>\n\n\n\n

So, what exactly are React Server Components? How do they work? And what do they do that React couldn\u2019t already do?<\/p>\n\n\n\n

To answer all these questions, we\u2019ll quickly go over the fundamentals. If you\u2019re in need of a refresher, have a quick look at this guide on how to learn React as a beginner<\/a>.<\/p>\n\n\n\n

In this post, we\u2019ll walk you through why we needed React Server Components, how they work, and some of the major benefits of RSCs.<\/p>\n\n\n\n

Let\u2019s get started!<\/p>\n\n\n\n

What are React Server Components?<\/h2>\n\n\n\n

React Server Components are React components that render ahead of time on the server (either once at build time or on each request) instead of in the browser. Only their rendered output travels to the client, so they add zero JavaScript to your bundle and can read databases, files, and other backend resources directly.<\/strong><\/p>\n\n\n\n

\"Tree<\/figure>\n\n\n\n
\n

\u201cServer Components are a new type of Component that renders ahead of time, before bundling, in an environment separate from your client app or SSR server.\u201d \u2014 the official React documentation<\/a><\/p>\n<\/blockquote>\n\n\n\n

Since RSCs execute directly on the server, they can efficiently access backend resources like databases and APIs<\/a> without an additional data fetching layer.<\/p>\n\n\n\n

And \u201cserver\u201d doesn\u2019t always mean a machine answering live traffic. Server components can also run once at build time (reading files or pulling content from a CMS), so even a site with no web server at all can use them to keep heavy rendering libraries out of the client bundle (per the React docs<\/a>).<\/p>\n\n\n\n

\n\t
\n\t\t<\/svg>\n\t\tDreamHost Glossary<\/span>\n\t<\/div>\n

API<\/h3>\n

An Application Programming Interface (API) is a set of functions enabling applications to access data and interact with external components, serving as a courier between client and server.<\/p>\n<\/div>\n\n\n\n

But why did we need RSCs anyway?<\/strong><\/p>\n\n\n\n

To answer this question, let\u2019s rewind a bit.<\/p>\n\n

Traditional React: client-side rendering (CSR)<\/h2>\n\n\n\n

React has always been a client-side UI library.<\/p>\n\n\n\n

The core idea behind React is to divide your entire design into smaller, independent units we call components. These components can manage their own private data (state<\/strong>) and pass data to each other (props<\/strong>).<\/p>\n\n\n\n

Think of these components as JavaScript functions<\/a> that download and run right in the user\u2019s browser. When someone visits your app, their browser downloads all the component code, and React steps in to render everything:<\/p>\n\n\n\n

\"Flowchart:<\/figure>\n\n\n\n