use client vs use server in Next.js: The Real Difference

If you think "use client" and "use server" are opposites — one for client components, one for server components — you have the single most common App Router misconception. They are not symmetric. This guide nails down what each actually does, straight from the React and Next.js docs.

Server Components are the default#

In the App Router, "by default, layouts and pages are Server Components." An unmarked file in app/ is already a Server Component — there is no directive to "make" one. Keep this in mind; it's why "use server" can't be the way to create one.

What "use client" does#

"use client" marks the boundary in the module dependency tree where code switches from server to client. From the React docs: it marks "the module and its transitive dependencies as client code" and defines the boundary "on the module dependency tree, not the render tree."

// app/ui/counter.tsx
'use client'
import { useState } from 'react'
 
export default function Counter() {
  const [count, setCount] = useState(0)
  return <button onClick={() => setCount(count + 1)}>{count}</button>
}

The crucial nuance most people miss: the boundary follows imports, not props. A Server Component passed as children to a Client Component stays a Server Component — it's rendered on the server and passed in as output. Only imported descendants get pulled client-side.

The directive must be at the very top of the file, above imports (comments are fine), with single or double quotes — not backticks.

What "use server" does (the misconception)#

"use server" marks Server Functions (a.k.a. Server Actions) — async functions that run on the server but are callable from client code. The React docs: it "marks server-side functions that can be called from client-side code." It does not make a component a Server Component.

// app/actions.ts
'use server'
import { db } from '@/lib/db'
 
export async function fetchUsers() {
  return db.user.findMany()   // runs on the server, callable from the client
}

// app/components/users-button.tsx
'use client'
import { fetchUsers } from '../actions'
 
export default function UsersButton() {
  return <button onClick={() => fetchUsers()}>Load users</button>
}

It has two legal placements: at the top of a file (marks all exports as Server Functions) or inline at the top of an async function body (marks just that function). It cannot go on a non-async function.

The contrast, side by side#

| | "use client" | "use server" | |---|---|---| | Goes | Top of a file, above imports | Top of a file, or inline in an async function | | Marks | A boundary: this module + imports become client code | Server Functions callable from the client | | Acts on | The module import graph | Individual server functions | | Common mistake | Placed too high → whole subtree ships to client | Used hoping to "force a Server Component" |

The two classic mistakes#

The Next.js docs spell out the second fix: "add 'use client' to specific interactive components instead of marking large parts of your UI as Client Components."

Official references: React use client, React use server, Next.js Server and Client Components.

Related Articles#

• Server Actions vs API Routes in Next.js Production
• Fix revalidatePath Not Working in Server Actions
• React Server Components Deep Dive
• Next.js App Router Complete Guide

Frequently Asked Questions#

Does "use server" make a component a Server Component?#

No. It marks server functions callable from the client. Server Components are the default in the App Router and need no directive — adding "use server" to a component file does not create one.

What does "use client" actually do?#

It marks the module and its transitive imports as client code — a boundary on the module dependency tree. It does not apply to Server Components passed in as children; those stay server-rendered.

Where do I put "use client" to avoid bloating the bundle?#

On the smallest interactive leaf component, not a layout or page. High placement pulls the whole imported subtree into the client bundle.