Why this matters
Reduces bundle size and hydration, improves Web Vitals, and simplifies server-side data fetching.
Prefer Server Components for pages/layouts and move interactivity to small leaf Client Components. Only add 'use client' where browser APIs or event handlers are strictly necessary.
Reduces bundle size and hydration, improves Web Vitals, and simplifies server-side data fetching.
Side-by-side examples engineers can pattern-match during review.
'use client'
export default function Page(){ const data = await fetch('/api/posts').then(r=>r.json()); return <div onClick={()=>{}}>{data.title}</div> }export default async function Page(){ const data = await fetch('https://api.example.com/posts',{ next:{ revalidate: 3600 } }).then(r=>r.json()); return (<div><h1>{data.title}</h1><LikeButton /></div>) }
// LikeButton.tsx
'use client'
export function LikeButton(){ function handleClick(){ /* client-only */ } return <button onClick={handleClick}>Like</button> }'use client' at the top of app/(marketing)/page.tsxServer page + small client child like <LikeButton />From the same buckets as this rule.