AIKraft/AI/Войти
AIKraft/Skills/Серверные компоненты React

Серверные компоненты React

Teaches React Server Components for zero-bundle server rendering. Use when components only need server-side data access and don't require client-side interactivity like state or event handlers.

patternsdev official Данные

Что делает навык

React Server Components позволяют использовать серверную модель мышления для рендеринга, что приводит к значительному уменьшению клиентского JavaScript-бандла. Этот подход отличается от Server-side Rendering (SSR) и оптимизирует производительность за счет выполнения выборки данных и рендеринга на сервере.

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

  • Когда необходимо снизить объем клиентского JavaScript, выполняя выборку данных и рендеринг на сервере.
  • Для улучшения производительности компонентов, не требующих клиентского JavaScript, в Next.js 13+ App Router.
  • Когда компонентам нужен только серверный доступ к данным и не требуется клиентская интерактивность (state или обработчики событий).

Как работает

  1. Определить, что компоненту требуется только серверный доступ к данным и отсутствует необходимость в клиентской интерактивности.
  2. Использовать React Server Components для выполнения выборки данных непосредственно на сервере.
  3. Выполнить рендеринг компонента на сервере, чтобы исключить его код из клиентского бандла.
  4. Применить этот подход в Next.js 13+ App Router для достижения нулевой стоимости JavaScript для серверных компонентов.

Примеры запросов агенту

Создай компонент, который загружает данные из базы данных и отображает их, используя React Server Components для минимизации бандла.
Как реализовать серверный рендеринг списка товаров в Next.js 13+, чтобы не отправлять JavaScript на клиент?
Напиши компонент, который использует React Server Components для получения данных API и их рендеринга без интерактивности на стороне клиента.

Описание составлено по SKILL.md навыка, сверено 05.10.2026.

Как подключить

1Скачать навык
# возьмите папку навыка «react-server-components» из репозитория: # https://github.com/patternsdev/skills
2Положить папку с SKILL.md к навыкам ассистента
# положите папку навыка туда, где ассистент ищет skills: cp -r react-server-components/ ~/.claude/skills/react-server-components/

Навык — папка с файлом SKILL.md (описание + инструкции) и опциональными скриптами. Ассистент (Claude, Claude Code и совместимые) подхватывает его по описанию и следует шагам.