Vercel React Performance

vercel-react-best-practices - гайд по перформансу React и Next.js от инженеров Vercel. 62 правила в 8 категориях, ранжированные по impact: data fetching, bundle splitting, Server Components, Image-оптимизация, fonts, hydration. AI применяет автоматически при ревью кода или генерации новых компонентов.

Кому полезно: фронтенд-разрабам, full-stack инженерам, тех-лидам, кто отвечает за скорость продукта на vercel.com уровне.

Запрос: «Оптимизируй этот компонент - медленно рендерится»

```
🔍 Анализ компонента UserDashboard:

❌ Найдено 4 нарушения (2 high-impact):

1. [HIGH] Нет dynamic import для тяжёлой библиотеки

import { Chart } from 'recharts'
↓ Bundle += 187 KB на каждой странице
✅ Fix: const Chart = dynamic(() => import('recharts'), { ssr: false })

1. [HIGH] useEffect с deps array делает water-fall fetch

useEffect → fetchUser → useEffect → fetchOrders
↓ TTFB +800мс
✅ Fix: Promise.all() в одном useEffect или Server Component

1. [MEDIUM] Нет React.memo для табличных строк

100 строк = 100 ре-рендеров на любое изменение state
✅ Fix: React.memo + useCallback на onclick handlers

1. [LOW] Image без width/height атрибутов

↓ CLS (Cumulative Layout Shift) > 0.1
✅ Fix: <Image /> from next/image с явными размерами

📊 Ожидаемый impact:
Bundle: 287KB → 100KB (-65%)
TTFB: 1.2s → 400ms (-66%)
LCP: 2.8s → 1.1s (-60%)
CLS: 0.15 → 0.02 (-87%)

[+ полный исправленный код]
```

Структура файлов

```
📁 vercel-react-best-practices/
📄 SKILL.md <- 62 правила в 8 категориях
📄 README.md <- обзор категорий + impact
```

Куда положить

Mac/Linux:
```bash
mkdir -p ~/.claude/skills/vercel-react-best-practices
cp SKILL.md ~/.claude/skills/vercel-react-best-practices/
```

Windows (PowerShell):
```powershell
mkdir "$env:USERPROFILE\.claude\skills\vercel-react-best-practices"
copy SKILL.md "$env:USERPROFILE\.claude\skills\vercel-react-best-practices\"
```

Как пользоваться

Просто пиши задачу на React / Next.js - скилл триггерится автоматически:

> /vercel-react-best-practices оптимизируй этот компонент. Сейчас слишком долго рендерится.

Или в обычном промпте: «создай страницу блога с server-side rendering и оптимальным data fetching» - скилл подтянется и применит правила Vercel.

• Claude Code - CLI, десктоп-приложение или VS Code-расширение ([установка](https://docs.anthropic.com/en/docs/claude-code/overview)).
• Подписка Claude Pro / Max / Team - для большинства команд.
• Никаких API-ключей, токенов и зависимостей не требуется.