vercel-react-best-practices

To improve React and Next.js performance, apply a curated set of 57 rules across 8 categories focusing on eliminating waterfalls, bundle size optimization, and server-side performance. This guides automated refactoring to speed up render times.

Best practices for optimizing Next.js bundle size involve applying structured performance guidelines during code generation. This skill provides concrete rules targeting bundle size reduction alongside rendering patterns and server-side performance improvements.

To eliminate data fetching waterfalls in React components, apply specific performance guidelines governing server and client boundaries. This skill references rules that restructure data fetching patterns to prevent sequential loading delays.

Yes, the performance guidance covers both server-side and client-side rendering patterns. It provides structured rules across component, page, data fetching, and server/client boundaries to comprehensively improve web vitals and load times.

Yes, you can use these React performance rules for automated code generation. The guidelines provide real-world scenarios and concrete examples specifically designed to guide automated refactoring across Next.js projects and components.

The best way to audit web vitals and rendering performance is using a consolidated reference of Vercel's engineering guidance. This skill offers 57 actionable rules across 8 categories to identify missed optimization opportunities during reviews.