vercel-react-best-practices

You can optimize React and Next.js performance by applying priority-based rule categories covering bundle size optimization, server-side performance, and re-render optimization. These 57 concrete patterns guide automated refactoring, code generation, and reviews to eliminate common bottlenecks.

Next.js rendering optimization and bundle size reduction best practices include eliminating waterfalls, optimizing client-side data fetching, and applying advanced patterns. These actionable guidelines enforce performance-conscious code generation and automated refactoring across server and client components.

Yes, you can automate applying React performance rules when writing new components. The guidelines provide clear usage scenarios for code generation, reviewing code, and refactoring existing code, allowing agents and automated tools to consume concrete patterns for performance-conscious output.

Yes, the React performance guidance covers both server-side and client-side data fetching patterns. It explicitly includes priority-based rule categories for Server-Side Performance and Client-Side Data Fetching to help engineers optimize Next.js projects across both environments.

Priority-based rule categories for React rendering optimization distinguish specific performance areas like eliminating waterfalls, JavaScript performance, and advanced patterns. This structured approach ensures automated tools generate targeted, performance-conscious code rather than applying generic improvements.

Automated React performance refactoring should be reviewed carefully when dealing with complex advanced patterns or deeply nested server and client component boundaries. The 57 rules provide actionable guidance, but developers must validate that automated changes preserve existing application logic and data fetching behaviors.