vercel-react-best-practices

Optimize React and Next.js performance by applying guidelines that eliminate data fetching waterfalls, reduce bundle size, and minimize component re-renders. This Skill provides over 50 rules for code generation and refactoring to ensure smoother user experiences.

Reducing bundle size in a Next.js application involves applying specific optimization rules during code generation. This Skill provides agent-friendly guidelines targeting bundle reduction alongside server-side rendering and data fetching parallelization.

Eliminate data fetching waterfalls in React by parallelizing server-side and client-side data requests. This Skill provides Vercel engineering best practices to structure data fetching logic for AI agents during code refactoring.

Yes, these optimization rules support both client-side and server-side rendering in Next.js. The guidelines cover critical areas including component re-render optimization and advanced patterns for data fetching across both rendering environments.

Frequent component re-renders in React occur due to unoptimized state management and data fetching patterns. This Skill provides over 50 performance rules to minimize re-renders by applying Vercel best practices during AI agent code generation and review.

No specific dependencies are required to optimize React code with this Skill. It functions as a reference component providing comprehensive performance optimization guidelines for AI agents to apply during Next.js and React code generation and refactoring.