Broken snippet
'use client';
import { serverOnlyConfig } from "@/lib/server-config";
export default function FeedPage() {
return <button onClick={...}>Like</button>;
}Back to week 4
Topic
Challenge: Server or Client?
Definition
A Server Component may render server-side data and compose Client Components, while browser interactivity must be isolated behind a Client Component boundary.
In simpler words
Keep the page shell on the server; make only the clicky leaf client-side.
The challenge prevents accidentally marking a whole route client-only because one child needs a button.
After this you can
- Locate a Client Component boundary
- Keep server-only code out of browser bundles
Find the smallest boundary
Definition
The "use client" directive marks a module and its imports as client-side, so it should appear only where browser APIs or interaction begin.
In simpler words
Move the interactive leaf, not the entire page, to the client.
Server Components can pass serializable props to Client Components.
A Client Component cannot import a server-only database or secret module.
Challenge lab
Bug report
A feed page imports a server-only environment helper after adding "use client" for a like button.
What is broken
The route was turned into a Client Component to make one button interactive.
Pass criteria
- Feed shell remains server-rendered
- Button receives only serializable data and callbacks
- No server-only import reaches the browser
Choose the correct fix
Keep in mind
- If the only event is a composer submit, the route shell does not need "use client".
Test
Check your understanding
At least 10 questions — mix of concept, syntax, practical, and logic. Score ≥ 80% (enforced by the API) to save progress.
Checking your session…
10 questions · concept 3 · syntax 2 · practical 3 · logic 2