Can this skill help reduce JavaScript bundle sizes?

Yes, it includes specific rules for eliminating barrel imports, implementing conditional loading, and deferring third-party scripts to keep client-side bundles lean.

When should I use this skill?

Use it during code reviews, when refactoring legacy React codebases, or when initializing new Next.js projects to ensure high performance from the first line of code.

What does the Vercel React Best Practices skill do?

It applies 45 prioritized rules to optimize the performance of React and Next.js code, focusing on areas like bundle size, rendering efficiency, and data fetching architecture.

How does this skill help with Next.js performance?

It specifically targets Next.js features like Server Components, streaming with Suspense, and dynamic imports to reduce time-to-interactive and bundle weight.

Does it support server-side data fetching optimization?

Yes, it provides patterns for React.cache deduplication, parallel fetching, and minimizing data serialization between server and client components.

Vercel React Best Practices

Name: Vercel React Best Practices
Author: julianromli

byjulianromli

•

101

Herramientas para Desarrolladores

Optimizes React and Next.js applications using 45 performance-focused rules and industry-leading patterns from Vercel Engineering.

Acerca de

This skill provides a comprehensive framework for applying Vercel's internal engineering standards to React and Next.js projects. It automates the identification and resolution of performance bottlenecks across eight critical categories, including request waterfalls, bundle size optimization, and server-side rendering efficiency. By integrating these best practices directly into the development workflow, the skill helps developers build faster, more scalable applications that excel in Core Web Vitals and user experience.

Características Principales

Optimized JavaScript execution patterns for high-frequency DOM and data tasks
Bundle size reduction via dynamic imports and barrel file management
Advanced re-render optimization for complex React component trees
Server-side performance tuning using React.cache and non-blocking operations
Critical waterfall elimination using parallel fetching and streaming patterns
101 GitHub stars

Casos de Uso

Refactoring Next.js applications to improve performance and Core Web Vitals
Automating code reviews for React performance and bundle size regressions
Implementing Vercel-standard data fetching and caching patterns in new projects

Acerca de

Características Principales

Optimized JavaScript execution patterns for high-frequency DOM and data tasks
Bundle size reduction via dynamic imports and barrel file management
Advanced re-render optimization for complex React component trees
Server-side performance tuning using React.cache and non-blocking operations
Critical waterfall elimination using parallel fetching and streaming patterns
101 GitHub stars

Casos de Uso

Refactoring Next.js applications to improve performance and Core Web Vitals
Automating code reviews for React performance and bundle size regressions
Implementing Vercel-standard data fetching and caching patterns in new projects