mediumFrontend

What is the difference between Server Components and Client Components in Next.js?

Q: What is the difference between Server Components and Client Components in Next.js?

**TL;DR.** **Server Components** render on the **server**, can access the backend directly, and ship **no JavaScript** to the browser — they're the **default** in the App Router. **Client Components** ( 'use client' ) run in the browser and enable **state, effects, and event handlers**. You compose them, pushing interactivity to the leaves. Server Component runs on server (default) DB/secrets access 0 KB client JS <tex

1.2k views

Understand the problem

RSC default vs interactive client components.

nextjsrscserver-componentsclient-components

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

Read the code

Server shell + interactive client leaf

// app/page.tsx — Server Component (no 'use client')
import Likes from './likes';
export default async function Page() {
  const post = await getPost();           // server-only data access
  return <article><h1>{post.title}</h1><Likes initial={post.likes} /></article>;
}

// likes.tsx — Client Component (interactivity)
'use client';
import { useState } from 'react';
export default function Likes({ initial }) {
  const [n, setN] = useState(initial);
  return <button onClick={() => setN(n + 1)}>♥ {n}</button>;
}

Join the discussion

Discussion (0)

No responses yet. Be the first to share what you think.

How do you handle forms with Server Actions in Next.js (progressive enhancement)?

What is generateStaticParams in Next.js and how does it enable SSG for dynamic routes?