Next.js: Server vs Client Components — пример кода

// ❌ 'use client' at the top pulls the ENTIRE tree — including the data-heavy
//     and its dependencies — into the browser bundle.
'use client';
import { Feed } from './feed';
export default function Page() {
  const [open, setOpen] = useState(false);
  return <> setOpen(true)}/>;
}

// ✅ Keep the page a Server Component. Isolate interactivity in a leaf.
import { Feed } from './feed';            // stays on the server, ships 0 JS
import { Toggle } from './toggle';        // the ONLY client component
export default function Page() {
  return <>;
}

// ✅ The children-as-prop pattern: a client shell wrapping server content
'use client';
export function Panel({ children }: { children: React.ReactNode }) {
  const [open, setOpen] = useState(true);
  return open ? {children} : null;   // children can be a Server Component!
}
// Used from a server component: