Minimize client component scope

Default to server components and only add "use client" to the smallest possible component that truly needs it (state, effects, event handlers, or browser APIs). Do not mark a parent/page as client just because a nested component is client-side - Next.js already interleaves server and client components, and adding the directive higher up unnecessarily pulls everything underneath into the client bundle. Before adding "use client", ask whether the interactive piece can be isolated into its own small leaf component, and whether the UX benefit justifies the bundle-size/performance cost. For example, if only a hover animation requires client-side state, prefer extracting just that interaction into an isolated client component (or dropping it) rather than converting the whole page/component:

// Avoid: marking the whole page client just for a small hover effect
"use client";
export default function CaseStudiesCTA() {
  const [isHovered, setIsHovered] = useState(false);
  // ...
}

// Prefer: keep the page server-rendered; isolate interactivity if truly needed,
// or simplify to avoid client-side state altogether when the benefit is marginal.
export default function CaseStudiesCTA() {
  // server-rendered markup, no client JS shipped
}

This keeps client bundles lean and preserves the performance benefits of server rendering.