# server-side-rendering

Скилл объясняет серверный рендеринг в React и подсказывает, когда он оправдан, а когда хватит статики или клиентского рендеринга.

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

## Что делает

Скилл включается на файлах `**/*.tsx` и `**/*.jsx` и разбирает с агентом, как устроен SSR: сервер отдаёт готовый HTML в ответ на запрос, данные из базы или внешнего API подтягиваются там же, а клиентский JavaScript для отрисовки не нужен. Из-за этого первый контент появляется раньше, а краулеры видят содержимое страницы.

Внутри — разделы «когда использовать» и «когда не использовать», инструкции и примеры. Агент предложит фреймворк с встроенной поддержкой вроде Next.js, `renderToPipeableStream` из React 18+ для стриминга с Suspense, гидratацию для интерактивных страниц. Есть разбор `getServerSideProps()` с фетчем данных и передачей их в компонент через props.

Главное ограничение — TTFB. Каждый запрос сервер обрабатывает заново, поэтому при наплыве пользователей, медленной сети или неоптимизированном серверном коде ответ задерживается. Часть взаимодействий требует полной перезагрузки страницы, одностраничное приложение на чистом SSR не собрать. Для внутренних дашбордов, где SEO неважно, скилл сам советует не брать SSR. Установка идёт через `npx skills add`, лицензия MIT.

## Установка

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

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

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

### Codex

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

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

### Cursor

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

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

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install PatternsDev/skills server-side-rendering
```

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

### Gemini CLI

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

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

### Windsurf (Devin Desktop)

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

### OpenCode

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

### Claude.ai

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

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

## Когда брать
- отдать поисковикам готовый HTML вместо пустой оболочки
- сократить время до первого контента на тяжёлых страницах
- подтянуть данные из API на сервере и передать их в компонент
- выбрать между SSR, статикой и клиентским рендерингом для конкретной страницы
- перевести страницу на стриминг с Suspense

## Примеры запросов агенту
- Помоги настроить SSR для страницы со списком пользователей на Next.js
- Стоит ли делать серверный рендеринг для этой страницы или хватит статики?
- Перепиши этот компонент под `getServerSideProps()` с фетчем данных

## Похожие
- [nextjs-typescript-tailwindcss-supabase](https://affpapa.org/nevibecode/skills/nextjs-typescript-tailwindcss-supabase.md) — скилл · 1300 установок
- [next](https://affpapa.org/nevibecode/skills/next.md) — скилл · 8600 установок
- [framer-motion-react](https://affpapa.org/nevibecode/skills/framer-motion-react.md) — скилл · 822 установки
- [material-ui-nextjs](https://affpapa.org/nevibecode/skills/material-ui-nextjs.md) — скилл · 727 установок
- [react-patterns](https://affpapa.org/nevibecode/skills/affaan-m-react-patterns.md) — скилл · 4900 установок
- [feature-sliced-design](https://affpapa.org/nevibecode/skills/feature-sliced-design.md) — скилл · 23600 установок

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

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

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