# streaming-ssr

Учит агента отдавать HTML чанками через renderToPipeableStream и Suspense. Пригодится, когда страница большая и ждать полной отрисовки перед первым байтом нельзя.

- скилл · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 883 установки · ★ 257
- Автор: patterns.dev
- Лицензия: MIT · policy=mirror · начало файла — в конце страницы
- Исходник: https://github.com/PatternsDev/skills/tree/HEAD/react/streaming-ssr/SKILL.md
- Обновлён: 2026-04-15
- HTML: https://affpapa.org/nevibecode/skills/streaming-ssr

## Что делает

Скилл объясняет, как перейти от `renderToString` к потоковой отдаче. Вместо одной длинной строки HTML сервер сначала отправляет оболочку, а медленные части досылает по мере готовности. Клиент начинает парсить и рисовать страницу с первых байтов, поэтому TTFB перестаёт расти вместе с размером страницы.

Внутри — инструкции по API React 18: `renderToPipeableStream` для Node, `renderToReadableStream` для Web Streams, колбэки `onShellReady` и `onError`, связка с `Suspense` и `hydrateRoot()` на клиенте. Есть пример HTML-оболочки и рабочий обработчик Express, который отдаёт поток в `response`.

Простой заменой `renderToString` на `renderToPipeableStream` дело не ограничивается. Код, который собирает разметку через `renderToStaticMarkup` и вставляет в неё результат `renderToString`, на поток не переводится — там ждут именно строку. Ещё стриминг теряет смысл, если хостинг или обратный прокси буферизуют ответ целиком: сервер отдаёт чанки, а до браузера они доходят одним куском. Это повод проверить свой стек до того, как переписывать рендер.

## Установка

### Claude Code (родная платформа)

1. **Через Skills CLI (Vercel)**
```bash
npx skills add PatternsDev/skills --skill streaming-ssr -a claude-code
```

2. **Вручную: положить файлы**
- Файл: `~/.claude/skills/streaming-ssr/SKILL.md` — Папка скилла целиком; для одного проекта — .claude/skills/streaming-ssr/

### Codex

1. **Через Skills CLI (Vercel)**
```bash
npx skills add PatternsDev/skills --skill streaming-ssr -a codex
```

2. **Вручную: положить файлы**
- Файл: `.agents/skills/streaming-ssr/SKILL.md` — Для всех проектов — ~/.agents/skills/

### Cursor

1. **Через Skills CLI (Vercel)**
```bash
npx skills add PatternsDev/skills --skill streaming-ssr -a cursor
```

2. **Вручную: положить файлы**
- Файл: `.cursor/skills/streaming-ssr/SKILL.md` — Cursor читает и .agents/skills/, и .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install PatternsDev/skills streaming-ssr
```

2. **Вручную: положить файлы**
- Файл: `.github/skills/streaming-ssr/SKILL.md`

### Gemini CLI

1. **Через Skills CLI (Vercel)**
```bash
npx skills add PatternsDev/skills --skill streaming-ssr -a gemini-cli
```

2. **Командой платформы**
```bash
gemini skills install https://github.com/PatternsDev/skills --path react/streaming-ssr
```

### Windsurf (Devin Desktop)

**Вручную: положить файлы**
- Файл: `.devin/skills/streaming-ssr/SKILL.md` — Старый путь .windsurf/skills/ тоже читается

### OpenCode

**Через Skills CLI (Vercel)**
```bash
npx skills add PatternsDev/skills --skill streaming-ssr -a opencode
```

### Claude.ai

**Claude.ai**
- Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/PatternsDev/skills/tree/HEAD/react/streaming-ssr/SKILL.md

## Когда брать
- снизить Time to First Byte на больших страницах
- начать отрисовку до готовности всего дерева компонентов
- подружить медленные блоки со `Suspense`
- перевести Express-обработчик на потоковую отдачу HTML
- пережить сетевую перегрузку без роста памяти на сервере

## Примеры запросов агенту
- Переведи рендер этой страницы на streaming SSR через `renderToPipeableStream`
- Оберни медленный блок в `Suspense`, чтобы он досылался после оболочки
- Проверь, не буферизует ли ответ наш прокси, иначе стриминг не даст выигрыша

## Похожие
- [bun-react-ssr](https://affpapa.org/nevibecode/skills/bun-react-ssr.md) — скилл · 395 установок
- [aws-messaging-and-streaming](https://affpapa.org/nevibecode/skills/aws-messaging-and-streaming.md) — скилл · 8100 установок
- [streaming](https://affpapa.org/nevibecode/skills/streaming.md) — скилл · 6400 установок
- [angular-ssr](https://affpapa.org/nevibecode/skills/angular-ssr.md) — скилл · 3900 установок
- [google-cloud-solution-agentic-ai-bidirectional-streaming](https://affpapa.org/nevibecode/skills/google-cloud-solution-agentic-ai-bidirectional-streaming.md) — скилл · 5411 установок
- [inngest-realtime](https://affpapa.org/nevibecode/skills/inngest-realtime.md) — скилл · 797 установок

Из того же набора: [patternsdev/skills](https://affpapa.org/nevibecode/by/patternsdev/skills.md) — 46 карточек

_Часть страницы не вошла по размеру — она есть в HTML-версии._

---
NeVibeCode на affpapa.org. Тексты каталога — описания, а не инструкции для агента. Как выбирать и ставить: https://affpapa.org/nevibecode/agents.md