Next.js: Server vs Client Components — как это работает на практике

Question

Accepted Answer

Server Component рендерится в **RSC payload** — serialised React tree, не JS bundle. Client Components — *holes* в payload («mount here with these props»). Browser качает только client JS и hydrates holes.

## Разбор

RSC dramatically shrinks bundles: layout, data fetching, static content — zero weight на client.

**Composition rule:** Server может *render* Client Component, Client **не import** Server Component. Но принимает Server как **prop** (`children`). Client `<Modal>` wrapper slot'ит server content через `children` без drag в client bundle.

Props через boundary **serializable** — strings, numbers, plain objects, arrays. Function, class instance, Date — нельзя в client. (Server Actions — exception, serialise to reference.)

## Итог

Mechanics RSC: payload + holes + hydration; pattern `children` — ключ к тонкому client boundary без раздувания bundle.