Next.js: Server vs Client Components — типичные gotcha на собеседовании

Типичные ловушки: 'use client' как boundary (не switch), non-serializable props, hooks только в client leaf, import graph решает server/client.

Разбор

• 'use client' — boundary, не per-file switch. Всё импортированное ниже — client bundle. На вершине page — главная ошибка bundle bloat.
• Client не import Server Components — но принимает как children/props. Workaround через children — senior signal.
• Props через boundary serializable. Function (кроме Server Action) или class instance — throw.
• Server Components — no hooks, no onClick. «Event handlers cannot be passed…» — передали handler с server на client неправильно.
• Компонент не «intrinsically» server/client — import graph решает. Тот же файл под 'use client' boundary — client component.
• useState в Server Component — beginner error; fix — client leaf, не 'use client' на всей page.
• Env vars: только NEXT_PUBLIC_* в client; server secrets safe в RSC, в client — undefined.

Итог

На интервью покажите composition через children, serializable props и минимальный client subtree — это отличает senior от «поставил use client на page».