Understanding Server Components in React 18 and Next.js 13

React and Next.js Logo

With the release of Next.js 13, they have a new /app directory that has newer approaches to data rendering, fetching, and also uses the latest React Server Components.

Note that the /app folder in Next.js 13 is still in Beta.

What is Rendering?

Rendering converts the code that you write into user interfaces that the user interacts with. With React 18 and Next.js 13 there is a complete shift in how you can render React code.

Let’s revisit some terms and definitions before we understand the new rendering mechanisms with Next.js 13. Here is a quick recap.

Client

The client refers to the browser on a user’s device, that sends a request to a server for your application code. It then turns the response from the server into an interface that the user can interact with.

Server

The server refers to the computer in a data center that stores your application code, receives request from the client, does some computation, and sends back an appropriate response.

Got it! Tell me more..

Client Components

Client Components are rendered on the client. In Next.js, client components can also be pre-rendered on the server and hydrated on the client.

Before React 18, the primary way to render your application using React was entirely on the client.

To use a Client Component in Next.js, create a file inside /app and add the ‘use client’ directive at the top of the file, before any imports.

Here is an example of a Client Component /app/Counter.js.

'use client';

import { useState } from 'react';
 
export default function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

Server Components

Server Component is a new concept that has been introduced in React 18, and been adopted by the Next.js 13…