Most teams adopting the App Router still write client-first React out of habit. That habit is quietly expensive.
Eng Abdalla
Updated Aug 29, 2026
No comments yet — be the first to weigh in.
The most common mistake I see in App Router codebases isn't a bug. It's a
habit: reaching for "use client" at the top of a file before asking whether
the file needs it. That single line changes what ships to the browser, and
teams add it reflexively because that's how React worked for the last
decade.
What use client actually costs
It doesn't just mark one component as interactive. It marks the boundary —
everything imported beneath it ships to the browser too, unless those
imports are Server Components passed in as children.
The instinct is to mark a whole page client-side because something on it needs interactivity — a like button, a dropdown, a form. The fix isn't to avoid interactivity. It's to push the client boundary as far down the tree as it will go.
// Before: the whole page opts into client rendering
"use client";
export default function ArticlePage({ post }: { post: Post }) {
const [liked, setLiked] = useState(false);
return (
<article>
<ArticleBody content={post.content} />
<button onClick={() => setLiked(!liked)}>Like</button>
</article>
);
}// After: only the interactive leaf pays the client cost
export default function ArticlePage({ post }: { post: Post }) {
return (
<article>
<ArticleBody content={post.content} />
<LikeButton postId={post.id} />
</article>
);
}ArticleBody — often the heaviest part of the tree, MDX rendering included
— never ships its rendering logic to the client in the second version. It
runs once, on the server, and sends HTML.
What changes in practice
Bundle size stops being a tax on every page and starts being a cost you pay per interactive component. A blog with a comment form and a theme toggle can ship almost no client JavaScript for the reading experience itself.
The places this bites teams:
useEffect inside a Client Component, when a Server
Component could have fetched it before render and passed it down as props.None of this is exotic. It's mostly discipline: default to the server, and justify every step toward the client rather than the other way around.