# Frontend

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

## Оглавление

- [Server и Client Components](#frontend-server-client)
- [Серверные данные](#frontend-data-boundary)
- [Производное состояние](#frontend-derived-state)
- [Черновики и серверное состояние](#frontend-remote-drafts)
- [Состояние в URL](#frontend-url-state)
- [Состояния интерфейса](#frontend-states)
- [Web performance](#frontend-performance)

<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)

---

<a id="frontend-data-boundary"></a>

# Серверные данные

## Коротко

Общий клиент или серверный модуль должен задавать типы, ошибки и политику кеша.

## Плохо

```text
Каждый компонент по-своему разбирает один ответ API.
```

## Хорошо

```text
Общий клиент: тип результата, ошибка, отмена.
Компоненты получают согласованные данные.
```

## Почему

Расхождение форматов и обработки ошибок делает интерфейс хрупким.

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

Это инженерное правило справочника, а не требование протокола. Первоисточник описывает подход или механизм; конкретный процесс выбирается проектом.

Не создавайте второй backend в обработчиках Next без необходимости. Маршрут скачивания документа может быть самостоятельной границей контента.

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

- Смена формата API обнаруживается проверкой контракта?

## Человек

Определяет актуальность, доступ и состояния интерфейса.

## Агент

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

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

- Смена формата API обнаруживается проверкой контракта?

## Источники

- [How to think about data security in Next.js](https://nextjs.org/docs/app/guides/data-security)
- [OpenAPI Specification v3.2.0](https://spec.openapis.org/oas/v3.2.0.html)

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

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

---

<a id="frontend-derived-state"></a>

# Производное состояние

## Коротко

Если значение полностью определяется текущими данными, вычислите его при отображении.

## Плохо

```javascript
useEffect(() => setFullName(first + " " + last), [first, last]);
```

## Хорошо

```javascript
const fullName = first + " " + last;
```

## Почему

Лишняя копия состояния требует синхронизации и создаёт промежуточные неверные значения.

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

Effect нужен для синхронизации с внешней системой. Тяжёлое вычисление оптимизируйте после измерения.

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

- Не хранится ли одна информация в нескольких состояниях?

## Человек

Определяет исходные данные и правила вычисления результата.

## Агент

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

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

- Не хранится ли одна информация в нескольких состояниях?

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

Корзина хранит позиции и количество; итог вычисляется при рендере из этих данных. Человек задаёт правила скидки, агент проверяет изменение количества и серверный перерасчёт перед оплатой.

## Источники

- [You Might Not Need an Effect – React](https://react.dev/learn/you-might-not-need-an-effect)

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

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

---

<a id="frontend-remote-drafts"></a>

# Черновики и серверное состояние

## Коротко

У полученных данных и редактируемой формы должны быть понятные владельцы.

## Плохо

```text
Обновление списка молча заменяет введённый текст формы.
```

## Хорошо

```text
Серверный снимок + локальный черновик.
При сохранении проверяется revision.
```

## Почему

Фоновое обновление не должно уничтожать работу пользователя.

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

Копировать данные в состояние формы допустимо для редактирования, если явно определены начало и завершение черновика.

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

- Обновите серверные данные во время ввода. Текст сохранился?

## Человек

Выбирает поведение при несохранённых и конфликтующих изменениях.

## Агент

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

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

- Обновите серверные данные во время ввода. Текст сохранился?

## Источники

- [You Might Not Need an Effect – React](https://react.dev/learn/you-might-not-need-an-effect)

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

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

---

<a id="frontend-url-state"></a>

# Состояние в URL

## Коротко

Поиск и фильтры, которыми делятся, должны восстанавливаться по ссылке.

## Плохо

```text
После обновления страницы поиск пропал.
```

## Хорошо

```text
/standards/?q=uuid&level=contextual
```

## Почему

Ссылка становится воспроизводимым описанием того, что видит пользователь.

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

Не помещайте в URL секреты или чувствительные данные. Временное состояние открытого меню не обязано попадать в адрес.

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

- Откройте ссылку в новой вкладке и нажмите «Назад».

## Человек

Определяет, какие фильтры должны сохраняться в общей ссылке.

## Агент

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

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

- Откройте ссылку в новой вкладке и нажмите «Назад».

## Источники

- [Working with the History API - Web APIs](https://developer.mozilla.org/en-US/docs/Web/API/History_API/Working_with_the_History_API)
- [URLSearchParams - Web APIs](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams)

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

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

---

<a id="frontend-states"></a>

# Состояния интерфейса

## Коротко

Пользователь должен понимать, идёт ли работа и как продолжить после сбоя.

## Плохо

```text
Любая ошибка сети отображается как «Ничего нет».
```

## Хорошо

```text
Загрузка → список.
Пустой результат → подсказка.
Ошибка → повторить запрос.
```

## Почему

Пустой список и недоступный сервер требуют разных действий.

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

Это инженерное правило справочника, а не требование протокола. Первоисточник описывает подход или механизм; конкретный процесс выбирается проектом.

При оптимистическом изменении нужны откат и объяснение ошибки.

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

- Проверьте медленную сеть, пустой ответ и отказ доступа.

## Человек

Определяет действия пользователя при загрузке, пустом результате и ошибке.

## Агент

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

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

- Проверьте медленную сеть, пустой ответ и отказ доступа.

## Источники

- [Understanding Success Criterion 4.1.3: Status Messages](https://www.w3.org/WAI/WCAG22/Understanding/status-messages.html)

Уровень: Обязательно. Проверено: 2026-11-09. Изменено: 2026-11-09.

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

---

<a id="frontend-performance"></a>

# Web performance

## Коротко

Оптимизируйте задержку, скачки макета и объём загрузки на целевых устройствах.

## Плохо

```text
Добавить memo везде, не измеряя эффект.
```

## Хорошо

```text
Найти медленный сценарий.
Измерить до и после изменения.
```

## Почему

Локальная оптимизация может усложнить код без заметной пользы.

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

Бюджеты зависят от продукта. Web Vitals полезны как ориентир; фиксированный общий лимит JS подходит не каждой странице.

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

- Проверьте слабое устройство, загрузку изображений и длинный список.

## Человек

Выбирает реальные страницы, устройства и бюджет производительности.

## Агент

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

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

- Проверьте слабое устройство, загрузку изображений и длинный список.

## Источники

- [Web Vitals  |  Articles  |  web.dev](https://web.dev/articles/vitals)

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

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