Server Components and Client Components

So far, you have been building components the same way as in React. However, Next.js introduces an important concept that changes how applications are built.

In Next.js, components are divided into server components and client components.

By default, every component in Next.js is a server component. This means it runs on the server, not in the browser.

What Are Server Components

Server components are rendered on the server and sent to the browser as ready-to-use HTML.

export default function Page() {
  return <h1>Server Component</h1>;
}

This component runs on the server and does not include client-side JavaScript by default.

Server components are useful because they improve performance and allow direct data access.

What Are Client Components

Client components run in the browser and allow interaction, such as handling clicks or managing state.

To create a client component, you must add "use client" at the top of the file:

"use client";

import { useState } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  );
}

This component runs in the browser and can respond to user actions.

Key Difference

The main difference is where the code runs:

• Server components run on the server;
• Client components run in the browser.

Server components focus on rendering content, while client components handle interaction.

When to Use Each

Each type of component offers its own set of benefits and limitations.

Server components:

• Excel at tasks that require security or access to backend resources;
• Do not include client-side JavaScript, helping keep your application fast and lightweight;
• Cannot use browser-only features like local storage;
• Cannot handle client-side interactivity directly.

Client components:

• Make your app interactive and can use browser APIs;
• Require sending more JavaScript to the browser, which can affect load times and performance if overused;
• Should be used only when necessary, keeping as much logic as possible in server components for optimal performance and security.

How They Work Together

You can combine both types of components.

A server component can include a client component inside it:

import Counter from "./Counter";

export default function Page() {
  return (
    <div>
      <h1>Dashboard</h1>
      <Counter />
    </div>
  );
}

The server handles rendering, and the client component adds interactivity.