Skip to main content

RSC Introduction

What are React Server Components (RSC)?​

A helpful way to think of RSCs may be to more amptly call them "React Serialized Components". These components are rendered on the server, and a serialized representation of their output is sent to the browser. These components are not re-rendered on the browser.

Comparision to Traditional Server Side Rendering (SSR)​

Traditional SSR Rendering​

Consider a Next.js application on the pages router (no server components).

When the browser requests a page something like this happens:

  1. Next.js renders the React app on the server, Next.js uses the html output of this render as the initial payload sent to the browser.

  2. The browser gets an html payload, along with a javascirpt bundle containing the React application code.

  3. The browser paints the html / css from the initial html payload

  4. Now, the browser needs to hydrate the React app. The first paint is just the raw html with no interactivity. The browser now needs to render the entire React app in the browser. This is where click handlers are attached and useEffect callbacks are triggered.

Drawbacks​

For most websites, even those with a lot of interactivity, most of the site does not really need to be hydrated or re-rendered in the browser.

Think of a simple CMS content block. If we are being honest, this doesn't really need to be a React component at all. It's content that never changes once delivered to the browser. Yet, with this server side rendering approach we can't pick and choose. We want React to power the interactive areas of our website, but we also want server rendering for SEO and UX.

Server Components Rendering​

Now consider a Next.js app using a mix of server components and client components

When the browser requests a page something like this happens:

  1. On the server, Next.js renders the React Server Components. The output of this is the html payload sent to the browser. (NOTE: This is a gross simplification, there is more to the output than just html)

  2. Still on the server, Next.js renders any client components and gets the resulting html and includes it in the initial html payload.

  3. The browser paints the html / css from the initial html payload

  4. The browser hydrates the client components. It skips over hydrating output of server components as those are essentially just their html now.

Summary​

The intent here is a high level overview of how RSC differs from traditional SSR.

Now, there are many implications of this for how best to structure React app when using RSC.