vercel-react-best-practices

Optimize React and Next.js performance by applying structured guidelines that eliminate waterfalls, reduce bundle size, improve server-side rendering, and minimize unnecessary re-renders. This skill provides over 50 rules to guide AI-driven code generation and refactoring for faster load times.

To eliminate data fetching waterfalls in Next.js, refactor your logic to parallelize data requests. This skill provides specific rules for code generation and refactoring data fetching logic to ensure requests run concurrently rather than sequentially.

Reduce React bundle size by applying code-splitting and component optimization rules. This skill offers guidelines for effective code-splitting and bundle size reduction to enhance application speed and user experience during development.

Yes, these React performance guidelines cover server-side rendering optimization. They provide rules to improve server-side efficiency by minimizing serialization and ensuring faster load times for Next.js applications.

Slow load times and re-renders in Next.js often stem from unoptimized data fetching, large bundle sizes, and server-side serialization. This skill addresses these issues with advanced patterns for client-side fetching and re-render optimization.

Yes, the vercel-react-best-practices skill is designed for AI agents to use during code generation and refactoring. It facilitates restructuring existing data fetching and component logic to eliminate performance bottlenecks.