React Server Components VS Client Components in NextJS App Router

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 (




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