vercel-react-best-practices

To optimize React and Next.js performance, apply vetted best practices for component rendering, data fetching, and code-splitting. This skill enforces concrete rules to eliminate waterfalls, reduce bundle size, and improve server-side rendering stability.

Best practices for data fetching in Next.js server components involve strategies that eliminate waterfalls and improve stability. This skill provides practical rules for server actions and data fetching patterns to safely refactor and optimize your application.

Reduce bundle size in Next.js by applying code-splitting patterns and performance guidelines. This skill checks for suboptimal patterns and enforces rules that guide safe refactoring, lowering bundle size and improving Time to Interactive.

Yes, these best practices suit both new and existing Next.js projects. When starting a new project or performing a performance review, apply the categorized rules to optimize rendering, bundles, and server-side behavior across your codebase.

Fix rendering waterfalls in React server components by following actionable guidelines that enforce safe refactoring patterns. This skill checks for elimination of waterfalls and guides reliable data fetching strategies to stabilize performance.

Applying React performance best practices to an existing codebase requires careful refactoring of data fetching and rendering patterns. This skill provides concrete rules to guide safe, reliable refactoring and checks for suboptimal patterns to prevent instability.