Sign in
Skip to solution
mediumFrontend

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

1.2k views
01

Understand the problem

RSC default vs interactive client components.

nextjsrscserver-componentsclient-components
02

Attempt it yourself

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

Nudge consolestandby

Stuck? Beam a request up — the console returns a conceptual nudge that guides your logic without spoiling the implementation.

03

Study the solution

Server Components render on the server, can access the backend directly, and ship no JS 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, keeping interactivity at the leaves.

Solution ready — 2 min read

Classified // press E to declassify

04

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>;
}
05

Join the discussion

Discussion (0)

Sign in to join the discussion.

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

Transmission complete // awaiting log

KEEP THE
STREAK ALIVE.

Dossier 15 of 95 decoded in the Next.js track. One more won't hurt.

Back to track