Навыки vercel-react-best-practices
📦

vercel-react-best-practices

Безопасно

Оптимизация производительности React и Next.js

Также доступно от: ZhanlinCui,vercel-labs,am-will

Создавайте более быстрые приложения на React и Next.js с проверенными паттернами производительности. Этот навык предоставляет практические рекомендации от инженеров Vercel для устранения водопадов рендеринга, уменьшения размера бандла и оптимизации рендеринга.

Поддерживает: Claude Codex Code(CC)
📊 69 Адекватно
1

Скачать ZIP навыка

2

Загрузить в Claude

Перейдите в Settings → Capabilities → Skills → Upload skill

3

Включите и начните использовать

Протестировать

Использование «vercel-react-best-practices». Компонент с последовательными fetch в useEffect

Ожидаемый результат:

Проблема: Три хука useEffect получают данные последовательно, вызывая водопад рендеринга. Решение: Объедините fetch в один useEffect с Promise.all() или преобразуйте родительский компонент в серверный.

Использование «vercel-react-best-practices». Импорт, подтягивающий всю библиотеку lodash

Ожидаемый результат:

Проблема: import _ from lodash добавляет 72KB к бандлу. Решение: Используйте импорты с поддержкой tree-shaking, например import debounce from lodash/debounce, или переключитесь на lodash-es для лучшей оптимизации бандлера.

Использование «vercel-react-best-practices». Компонент пересчитывает дорогостоящее значение при каждом рендере

Ожидаемый результат:

Проблема: Дорогостоящие вычисления выполняются при каждом рендере. Решение: Оберните в useMemo с правильными зависимостями или извлеките в отдельный мемоизированный компонент, который повторно рендерится только при изменении входных данных.

Аудит безопасности

Безопасно
v1 • 2/25/2026

Static analysis detected 911 pattern matches across 51 files (4901 lines), but all findings are FALSE POSITIVES. The skill is a documentation-only repository containing React/Next.js performance optimization guidelines in markdown format. Detected patterns (shell commands, dynamic imports, fetch calls, storage access) exist solely as code examples within documentation, not as executable code. No actual security risks identified.

51
Просканировано файлов
4,901
Проанализировано строк
0
находки
1
Всего аудитов
Проблем безопасности не найдено
Проверено: claude

Оценка качества

38
Архитектура
100
Сопровождаемость
87
Контент
22
Сообщество
100
Безопасность
83
Соответствие спецификации

Что вы можете построить

Создание новых функций React

Разработчики React, создающие новые функции, пишут компоненты с оптимальной производительностью с самого начала, следуя одобренным Vercel паттернам для получения данных, рендеринга и оптимизации бандла

Проверка pull-запросов

Команды, проверяющие pull-запросы, проверяют код на антипаттерны производительности перед слиянием, выявляя водопады рендеринга, ненужные повторные рендеринги и раздувание бандла на ранних этапах разработки

Миграция на Next.js App Router

Инженеры, мигрирующие на Next.js App Router, преобразуют паттерны клиентской стороны в архитектуру серверных компонентов, изучая правильное использование серверного кэширования, границ сериализации и параллельного получения данных

Попробуйте эти промпты

Проверка компонента на проблемы производительности 
Проверьте этот React компонент на проблемы производительности. Выявите любые водопады рендеринга, ненужные повторные рендеринги или возможности оптимизации бандла. Предложите конкретные улучшения на основе лучших практик Vercel.
Исправление водопада получения данных 
Этот компонент получает данные последовательно. Рефакторируйте его для параллельного получения с помощью Promise.all() или реструктурируйте как серверные компоненты. Объясните, какой подход лучше для этого случая использования.
Оптимизация кэширования серверного компонента 
Проанализируйте получение данных в этом серверном компоненте. Рекомендуйте стратегию кэширования с использованием React.cache() для дедупликации для каждого запроса или LRU кэширования для оптимизации между запросами. Включите соображения по инвалидации кэша.
Проектирование производительности многостраничной панели мониторинга 
Спроектируйте панель мониторинга с 10+ виджетами, показывающими данные в реальном времени и исторические данные. Укажите: 1) Границы серверных и клиентских компонентов, 2) Стратегию получения данных и кэширования, 3) Состояния загрузки с Suspense, 4) Оптимизацию бандла для сторонних библиотек построения графиков.

Лучшие практики

  • Запускайте промисы рано и ждите поздно - инициируйте получение данных до того, как оно понадобится, откладывайте await до момента, когда значение требуется
  • Используйте серверные компоненты по умолчанию - добавляйте 'use client' только когда требуются браузерные API или интерактивность
  • Предпочитайте SWR или React Query для получения данных на клиенте - встроенное кэширование, дедупликация и ревалидация

Избегать

  • Последовательное получение данных в отдельных хуках useEffect - вызывает водопады рендеринга
  • Импорт всей библиотеки утилит - раздутые бандлы, используйте конкретные импорты
  • Использование && для условного рендеринга компонентов, которые рендерят '0' - используйте тернарный оператор

Часто задаваемые вопросы

Когда следует использовать серверные компоненты вместо клиентских?
По умолчанию используйте серверные компоненты для получения данных, тяжёлых вычислений и интеграций с бэкендом. Используйте клиентские компоненты только для интерактивности (useState, useEffect), браузерных API или обработчиков событий. Держите клиентские компоненты на листьях дерева компонентов.
Как исправить водопады рендеринга в моих компонентах?
Используйте Promise.all() для независимых fetch, реструктурируйте для параллельного получения в серверных компонентах или используйте библиотеки типа better-all для частичных зависимостей. Запускайте fetch рано (на верхнем уровне) и ждите поздно (там, где нужно).
В чём разница между React.cache() и LRU кэшированием?
React.cache() обеспечивает дедупликацию для каждого запроса - кэширует в пределах одного рендера. LRU кэширование сохраняется между запросами с использованием внешних хранилищ типа Redis или in-memory Map. Используйте cache() для дедупликации, LRU для дорогостоящих данных между запросами.
Как уменьшить размер бандла Next.js?
Используйте next/dynamic для тяжёлых компонентов, импортируйте утилиты напрямую (не из файлов-баррелов), откладывайте сторонние скрипты до завершения гидратации и используйте условные импорты для функций, не нужных при начальной загрузке. Проверяйте бандл с помощью next-bundle-analyzer.
Почему SWR помогает с получением данных на стороне клиента?
SWR обеспечивает автоматическую дедупликацию запросов (несколько компонентов, запрашивающих одни и те же данные, используют один fetch), кэширование со стратегией stale-while-revalidate, ревалидацию при фокусе и оптимистичные обновления. Уменьшает количество сетевых запросов и улучшает воспринимаемую производительность.
Когда следует использовать startTransition?
Используйте startTransition для не срочных обновлений состояния, которые могут быть прерваны, например фильтрация больших списков или ввод в поисковых полях. Сохраняет отзывчивость UI, позволяя React приоритизировать взаимодействия с пользователем над фоновыми обновлениями.

Сведения для разработчиков

Автор

sickn33

Лицензия

MIT

Репозиторий

https://github.com/sickn33/antigravity-awesome-skills/tree/main/web-app/public/skills/react-best-practices

Ссылка

main

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

📄 SKILL.md

📄 README.md

📄 metadata.json

📄 AGENTS.md

📄 rules/_sections.md

📄 rules/_template.md

📄 rules/async-*.md

📄 rules/bundle-*.md

📄 rules/server-*.md

📄 rules/client-*.md

📄 rules/rerender-*.md

📄 rules/rendering-*.md

📄 rules/js-*.md

📄 rules/advanced-*.md