vercel-react-best-practices

React and Next.js performance optimization involves eliminating data waterfalls, reducing bundle size, and improving server-side rendering efficiency. This Skill provides over 50 categorized rules with code examples to guide automated refactoring for faster load times.

To reduce bundle size and eliminate waterfalls in Next.js, apply structured refactoring rules that optimize server-side data fetching and rendering. This enforces priority-based best practices to ensure faster load times and improved user experience.

AI agents can automatically refactor React components for performance using this Skill. It provides actionable advice and detailed code examples designed for automated code generation, review, and refactoring to enforce best practices.

Yes, this guide works for both client-side and server-side rendering. It covers critical optimization areas including server-side efficiency, rendering optimizations, and bundle size reduction to comprehensively improve React and Next.js applications.

You should apply performance best practices during code generation and refactoring to prevent slow load times. Using a structured set of rules ensures you address critical areas like rendering and server-side efficiency before deployment.