vercel-react-best-practices

To optimize React and Next.js performance, apply comprehensive guidelines covering waterfall elimination, bundle size reduction, and server-side rendering. This provides over 50 rules to tackle slow load times, bundle bloat, and inefficient rendering.

Next.js data fetching and re-render optimization best practices include parallelizing data requests to eliminate waterfalls and correctly memoizing components. This ensures efficient client-side fetching and minimizes unnecessary re-renders for faster TTI.

Yes, AI agents can automatically refactor React code to improve JavaScript performance. The guidelines are optimized for LLMs to use in code generation and review, requiring adherence to specific rules for automated refactoring.

The best way to reduce initial Next.js bundle size is to consult these performance guidelines before development. This ensures components are memoized correctly and data fetching is parallelized, minimizing the bundle for faster TTI.

You need server-side performance optimization for React applications when experiencing slow load times and bundle bloat. Applying these optimization guidelines targets server-side rendering performance and client-side data fetching to resolve inefficiencies.

The limitation of using automated rules for React code generation is the strict requirement for adherence to specific refactoring guidelines. The Skill provides rules for AI agents, meaning automated changes must strictly follow the defined performance optimization patterns.