Understanding Server Components in React 18 and Next.js 13

5 min readFeb 15, 2023

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 beta within the /app folder.

Server Components allow you to render components on the server, and reduce the amount of JavaScript sent to the client.

All components inside the Next.js /app directory are Server Components by default.

Why this shift to Server Components?

Server Image : https://app.pluralsight.com/library/courses/nextjs-13-fundamentals/table-of-contents by Adhithi Ravichandran

React Server Components provides the developers the ability to tap into the server infrastructure. Before the introduction of Server Components, React was capable of only client-side rendering. With the introduction of the new Server Components, large dependencies can remain entirely on the server, resulting in a performance boost.

The client-side JavaScript bundle size is reduced when large dependencies are kept on the server. You can still leverage Client Components, whenever there is new user interactivity. But other than that the client-side run time JavaScript bundle size is minimal.

This is a huge win for the React ecosystem, and has been adopted already by Next.js 13.

Component-level Client and Server Rendering

What is cool about this new approach is that you can you can interleave Server and Client Components in your application, and behind the scenes, React will seamlessly merge the work of both environments.

React can render on the client and the server, and you can choose the rendering environment at the component level!

The component diagram below shows an app structure which contains both Server and Client Components. You can mix them up based on your application’s use case.

https://app.pluralsight.com/library/courses/nextjs-13-fundamentals/table-of-contents by Adhithi Ravichandran

The pink S’s are Server Components and the blue C’s are Client Components.

Although you can use both Server and Client Components within the same app, there is a restriction in React, where you cannot import a Server Component inside a Client Component.

For instance the following is not allowed in React:

'use client';

// ❌ You cannot import a Server Component into a Client Component
import MyServerComponent from './MyServerComponent';

export default function ClientComponent() {
  return (
    <>
      <MyServerComponent />
    </>
  );
}

Instead you can pass a Server Component as a child or a prop to a Client Component as a workaround as shown below.

// ✅ You can pass a Server Component as a child or prop of a Client Component.
import ClientComponent from "./ClientComponent";
import ServerComponent from "./ServerComponent";

export default function Page() {
  return (
    <ClientComponent>
      <ServerComponent />
    </ClientComponent>
  );
}

'use client';

// ✅ You can pass a Server Component as a child or prop of a Client Component.
export default function ClientComponent({children}) {
  return (
    <>
      {children}
    </>
  );
}

When to use Client vs. Server Components?

You only need to mark components as ‘use client’ when they use client hooks such as useState or useEffect.

It’s best to leave components that do not depend on client hooks without the directive so that they can automatically be rendered as a Server Component when they aren’t imported by another Client Component.

This helps ensure the smallest amount of client-side JavaScript.

The goal is to ship the smallest amount of client-side JavaScript.

Use Client Components when:

You use React hooks such as useState, useEffect, useReducer, etc..
There is interactivity within the component, with event listeners such as onClick().
There are custom hooks that depend on state or effects.
Using React Class Components.

Use Server Components when:

You fetch data from the server API.
Sensitive information needs to be stored (tokens, API keys, etc.).
You need to access backend resources directly.
There are large dependencies.

Resources

Alright folks, that’s a wrap! Hope you enjoyed this article! Here are some resources that will come handy in your journey to learn React and Next.js:

You can check out my latest course on Next.js 13 on Pluralsight below:

Next.js 13 Fundamentals

In this course, you will learn about Next.js, a fast and popular framework to build React applications. Next.js…

www.pluralsight.com

This course covers the fundamentals of Next.js 13, and also teaches you to build a demo app using the new /app directory and teaches the beta concepts of Server Components.

Official Docs:

New React Docs

Next.js Docs