React Server Components: When to use "use client"
A definitive guide on structuring your Next.js App Router applications to maximize the benefits of React Server Components.
The Next.js App Router introduced React Server Components (RSC) as the default. While powerful, many developers default to slapping "use client" at the top of every file out of habit.
The Leaf Node Strategy
We treat our application trees like a deeply rooted plant. The trunk and major branches (Layouts, Pages, Data Fetching wrappers) are always Server Components. They handle the heavy lifting: database queries, raw data formatting, and SEO metadata.
We only append "use client" to the "leaves" of the tree—small, isolated components that require interactivity (like a LikeButton or a DropdownMenu).
By isolating client boundaries, we dramatically reduce the amount of JavaScript sent to the browser.