Vercel React Best Practices

Навык Vercel посвящён практикам производительности для React и Next.js и оформлен как справочник для написания, ревью и рефакторинга кода. Его источник описывает 70 правил, распределённых по восьми категориям и упорядоченных по ожидаемому влиянию. В начале находятся устранение последовательных ожиданий и оптимизация размера клиентского bundle: сначала стоит искать независимые операции, которые можно запускать параллельно, откладывать await до действительно нужной ветки и не выстраивать сетевые запросы в искусственную цепочку. Для bundle источник предлагает прямые импорты вместо широких barrel-импортов, статически анализируемые пути, динамическую загрузку тяжёлых модулей, отложенное подключение сторонних скриптов и загрузку необязательного кода только при активации функции. Отдельный блок посвящён серверной части Next.js. В нём рассматриваются аутентификация server actions, React.cache для дедупликации в рамках запроса, LRU-кэш для межзапросных результатов, уменьшение сериализуемых props, вынос статического I/O, отказ от общего изменяемого состояния модуля, параллельная выборка данных и применение after() для неблокирующей работы. Эти рекомендации помогают проверить, где сервер ждёт лишнее, передаёт клиенту больше данных, чем требуется, или повторяет одинаковую работу. Для клиентских запросов описаны дедупликация через SWR, аккуратное управление глобальными обработчиками событий, passive listeners и экономное использование localStorage. В разделе о перерисовках собраны правила для зависимостей эффектов, производных значений, функционального setState, ленивой инициализации, memo только там, где она оправдана, переходов и отложенных значений. В разделе рендеринга рассматриваются content-visibility для длинных списков, вынос статического JSX, гидрация, ресурcные подсказки, SVG и defer/async для скриптов. Низкоуровневые правила касаются группировки DOM- и CSS-изменений, Map и Set для повторных поисков, раннего выхода, объединения проходов и кэширования результатов. Последняя категория содержит расширенные паттерны для стабильных обработчиков и инициализации. Практический сценарий использования — пройти этим списком по React-компоненту, Next.js route, загрузке данных или клиентскому bundle, затем выбрать только применимые правила и проверить результат измерениями проекта. Навык не предоставляет профилирование конкретного приложения и не обещает одинаковый выигрыш для любой кодовой базы: рекомендации нужно сопоставлять с фактическими зависимостями, поведением рендера и размером сборки. Источник также разделяет критичные, высокие, средние и низкие приоритеты, поэтому начать можно с waterfalls и bundle, а менее значимые микрооптимизации оставить на потом.