AIKraft/AI/Войти
AIKraft/Skills/Селективная гидратация React

Селективная гидратация React

Teaches selective hydration combined with streaming SSR in React 18+. Use when you need to prioritize hydrating interactive components while streaming the rest of the page.

patternsdev official Разработка

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

Навык позволяет реализовать избирательную гидратацию в React 18+ в сочетании со стримингом SSR, чтобы сделать части страницы интерактивными до полной загрузки JavaScript. Это решает проблему блокировки гидратации всей страницы из-за медленных компонентов, таких как те, что выполняют тяжелые запросы к данным.

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

  • Когда необходимо сделать части SSR-страницы интерактивными до полной загрузки JavaScript-бандла.
  • Когда медленные компоненты (например, с загрузкой данных) блокируют гидратацию всей страницы.
  • Когда нужно приоритизировать гидратацию критически важных интерактивных компонентов, не дожидаясь загрузки остального контента.

Как работает

  1. Использовать Suspense boundaries для выделения независимых блоков UI, подлежащих гидратации.
  2. Применять renderToPipeableStream (для Node) или renderToReadableStream (для edge) для стриминга SSR.
  3. Размещать тяжелые компоненты с загрузкой данных внутри Suspense, чтобы они не задерживали гидратацию соседних компонентов.
  4. Убедиться, что критически важные интерактивные компоненты не находятся внутри долгоживущих loading fallbacks.
  5. Использовать hydrateRoot (React 18+) для активации избирательной гидратации.

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

Как настроить избирательную гидратацию в React 18 с использованием Suspense и стриминга?
Используй Suspense для изоляции тяжелых компонентов при SSR, чтобы не блокировать гидратацию остальной страницы.
Настрой стриминг SSR через renderToPipeableStream и избирательную гидратацию через hydrateRoot.

Что понадобится

  • React 18+
  • Библиотека react-dom/server (для методов renderToString, renderToPipeableStream, renderToReadableStream)
  • Метод hydrateRoot

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

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

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

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