Don't add "use client" to page or layout files. Extract the interactive part into a small client component.
A "use client" at the page level makes the entire page client-rendered, losing all server component benefits (zero JS, SEO, streaming).
BeforeMerge scans your pull requests against this rule and 3+ others. Get actionable feedback before code ships.
A "use client" on a page file makes everything in that file client-rendered — including data that could have been fetched on the server.
// components/like-button.tsx — small client component
"use client"
export function LikeButton({ ruleId }: { ruleId: string }) {
return <button onClick={() => likeRule(ruleId)}>Like</button>
}
// page.tsx — server component (no "use client")
export default async function RulePage({ params }) {
const rule = await getRule(params.slug)
return (
<div>
<h1>{rule.title}</h1>
<p>{rule.description}</p>
<LikeButton ruleId={rule.id} />
</div>
)
}