vercel-react-best-practices

To fix slow page loads caused by large bundle sizes, you can apply performance optimization rules to reduce your Next.js bundle. This Skill provides concrete examples of incorrect versus correct implementations to eliminate waterfalls and reduce bundle size.

The best way to optimize React component re-renders is by applying targeted refactoring rules. This Skill provides specific guidelines and correct code examples to eliminate unnecessary re-renders and improve rendering performance.

To eliminate data fetching waterfalls in React, you need to restructure your client-side fetching patterns. This Skill offers over 50 optimization rules, including specific patterns to flatten waterfalls and improve server-side performance.

Yes, you can use these optimization guidelines for both React and Next.js projects. The Skill provides comprehensive performance rules covering both frameworks, targeting critical areas like server-side rendering and client-side fetching.

Your Next.js application has inefficient server-side rendering due to unoptimized data fetching and rendering patterns. This Skill identifies these bottlenecks and provides advanced patterns to refactor components for optimal server-side performance.

Refactoring React components for performance requires careful application of over 50 distinct rules covering waterfalls, bundle size, and re-renders. You must map your specific bottlenecks to the correct optimization patterns provided to avoid introducing new rendering issues.