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>…