Версия источника: 4880e8b4372c96001c2e052be28b68a95d31252b
Синхронизировано: 2026-11-09T11:15:07.649Z
Источник: https://github.com/sergey-from-riders/vibecoding-base/tree/4880e8b4372c96001c2e052be28b68a95d31252b

<a id="frontend-server-client"></a>

# Server и Client Components

## Коротко

В Next.js загружайте серверные данные на сервере, а интерактивные части выделяйте отдельно.

## Плохо

```text
"use client" во всём дереве страниц, включая чтение секретов.
```

## Хорошо

```text
Server Component загружает данные.
Client Component управляет поиском и кнопками.
```

## Почему

Серверные секреты не должны попадать в браузер; лишний клиентский код увеличивает загрузку.

## Когда применять

Для App Router. В обычном React SPA серверных компонентов может не быть.

## Как проверить

- Нет ли секретов в клиентской сборке? Зачем компоненту use client?

## Человек

Определяет нужную интерактивность и границы доступа к данным.

## Агент

Реализует поведение компонентов и проверяет изменение данных, загрузку и ошибку в браузере.

Контроль результата:

- Нет ли секретов в клиентской сборке? Зачем компоненту use client?

## Пример применения

Страница заказа загружает разрешённые данные на сервере. Кнопка изменения количества — небольшой Client Component; строка подключения к БД не передаётся в props.

## Источники

- [Server and Client Components](https://nextjs.org/docs/app/getting-started/server-and-client-components)

Уровень: Рекомендуется. Проверено: 2026-11-09. Изменено: 2026-11-09.

[Исходный файл](https://github.com/sergey-from-riders/vibecoding-base/blob/4880e8b4372c96001c2e052be28b68a95d31252b/registry/standards/frontend/next/rules/server-client.md)