Загрузка…
Next.js: Server vs Client Components — ментальная модель
Next.js · middle · сложность 5
Server Components — только на сервере, zero JS в bundle (data, secrets, DB). Client Components — SSR + hydration (state, effects, handlers). 'use client' — граница, откуда начинается client bundle.
Разбор
По умолчанию — Server Component. В client opt-in через 'use client'. Различие — capabilities и cost:
| Server Component | Client Component | |
|---|---|---|
| Runs where | server only | server (SSR) + browser (hydration) |
| Ships JS | none | yes — it's in the bundle |
| Can | await data, read secrets, hit the DB | useState, useEffect, onClick, browser APIs |
| Cannot | use hooks or event handlers | import server-only code, await in the body |
Что сказать
'use client' ≠ «сделать файл client-side» — «здесь начинается client bundle». Всё импортированное ниже тянется в browser bundle. Push 'use client' к листьям — button, input; data-heavy tree оставляйте на сервере.
Итог
RSC-модель: сервер по умолчанию, client — точечно на интерактив; граница 'use client' определяет размер JS.