Why do we use use client in Next.js?

In Next.js App Router, components are Server Components by default. The use client directive is used to mark components that must run in the browser.

What does use client do?

It tells Next.js to send the component’s JavaScript to the browser so it can handle state, events, and browser APIs.

Client Component Example

"use client";

import { useState } from "react";

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

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

Why is async used only in Server Components?

In Next.js, async components are intended for Server Components because data fetching happens on the server before the page is sent to the browser.

Server Components can safely fetch data from databases, private APIs, and environment variables without exposing them to the client.

// Server Component
export default async function Page() {
  const data = await fetch("https://api.example.com/data");
  return <h1>{data.title}</h1>;
}

Client Components cannot be async because they run in the browser, where data fetching must be handled using hooks like useEffect or libraries such as React Query.

Real-World Example

A blog page fetches posts on the server using an async Server Component, while the comment form is a Client Component usinguse client.

Interview Tip

Server Components can be async for data fetching, while Client Components handle interactivity and must use hooks instead of async rendering.