AIKraft/AI/Войти
AIKraft/Skills/Потоковый SSR

Потоковый SSR

Teaches streaming server-side rendering for chunked HTML delivery. Use when you need faster Time to First Byte and First Contentful Paint by streaming HTML as it's generated on the server.

patternsdev official Другое

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

Навык реализует потоковый серверный рендеринг (SSR) для отправки HTML частями, что позволяет клиенту начать парсинг и отрисовку страницы сразу после получения первых фрагментов. Это снижает время до первого байта (TTFB) и время до первого контента (FCP), отправляя сначала оболочку, а затем более медные части по мере их генерации.

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

  • Улучшение показателей TTFB и FCP за счёт инкрементальной отправки HTML
  • Оптимизация крупных страниц, где ожидание полной генерации HTML задерживает начальную отрисовку
  • Снижение времени до интерактивности при сохранении серверного рендеринга

Как работает

  1. Использовать renderToPipeableStream() на Node-средах или renderToReadableStream() на Web Stream-средах для генерации потока
  2. Отправить оболочку (shell) страницы клиенту первой, чтобы начать парсинг и отрисовку
  3. Потоково передавать более медные части контента по мере их готовности
  4. На клиенте выполнить гидратацию полученного ответа с помощью hydrateRoot()

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

Как реализовать потоковый SSR для улучшения TTFB на крупной странице?
Настройте отправку HTML частями с использованием renderToPipeableStream
Как использовать hydrateRoot для гидратации потокового ответа на клиенте?

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

  • Среда выполнения Node или Web Stream
  • Поддержка потоковых ответов на стороне хостинга (без буферизации)

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

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

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

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