React Server Components VS Client Components in NextJS App Router

janac
4 min readJan 5, 2024

Note: this article assumes the reader has basic knowledge of React. We start with a quick primer just in case.

React Components

React allows us to create Components, which is a block of frontend code that can include layout, functionality, state, and style. At a minimum, it will return JSX, which gets transpiled into HTML.

Here’s an example of a React component:

// A basic React component
function NavBar() {
return (
<div>
<ul>
<li> Home </li>
<li> Contact </li>
<li> About </li>
</ul>
</div>);
}

A React component is just a JavaScript function that returns JSX code.

React Client Components

Up until 2020, all React components were Client Components (we will abbreviate these as CC for the rest of the article).

Typically, we would have a CC that establishes some layout, state, and some frontend interactivity. If we need to call the server, then we would make an API call using fetch or a third-party HTML client like axios.

This works fine, but doesn’t take advantage of a page load optimization technique called Server Side Rendering (SSR).

Server Side Rendering (SSR)

SSR is a way to reduce page load time, especially when there is a lot of static content. In typical React, the entire JS bundle is sent to the browser and then rendered into HTML. Using an SSR framework like NextJS, we can render some of this HTML on the server at compile time, so we don’t have to send the JS over the network, and we don’t have to spend time compiling on the client.

SSR is an umbrella term for a variety of techniques, for example Static Site Generation (SSG) which is what is described above. There are other variations of SSR which I encourage you to research, but won’t be covered here.

The latest version of NextJS (App Router) now uses React Server Components by default. You can still opt-in to use CCs using the use client; directive.

// A basic React Client component
"use client"; // This tells NextJS + React that this is a client component

function NavBar() {
return (
<div>
<ul>
<li> Home </li>
<li> Contact </li>
<li> About </li>
</ul>
</div>);
}

--

--

janac

Most of my writing is about software. I enjoy summarizing and analyzing books and self-help videos. I am senior software consultant at LazerTechnologies.com.