vercel-react-best-practices

Optimize React and Next.js rendering by applying proven patterns across 8 priority areas including async, server, client, and rendering to reduce waterfalls and accelerate TTI. These patterns guide code refactoring and generation for real-world projects.

Reducing bundle size in Next.js involves applying specific optimization patterns from the bundle and JS priority categories. These patterns provide concrete examples and guidance for refactoring components and pages to minimize unnecessary JavaScript payload.

Next.js server components improve rendering performance by executing on the server to reduce client-side JavaScript and data fetching waterfalls. The Skill guides you through applying server and client component patterns to optimize real-world projects.

You can use these React performance patterns to refactor existing components, Next.js pages, and server actions. The Skill enforces patterns across 8 priority categories to guide automated refactoring and code generation for performance-conscious code.

React applications suffer from unnecessary rerenders due to suboptimal patterns, which you can fix by applying the rerender priority optimization patterns. These patterns guide refactoring components to prevent performance regressions and accelerate TTI.