React Server Components VS Client Components in NextJS App Router

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…