vercel-react-best-practices

To optimize React and Next.js performance, apply over 45 rules covering waterfall elimination, bundle size reduction, server-side rendering, and re-render optimization. This Skill provides incorrect vs. correct implementation examples to guide automated refactoring and code generation.

The best way to eliminate data fetching waterfalls in Next.js involves applying specific performance optimization guidelines provided here. It includes refactoring client-side data fetching patterns to ensure parallel data loading and prevent sequential request blocking.

Yes, you can use these guidelines to review and refactor an existing Next.js codebase. The Skill provides concrete examples of incorrect versus correct implementations across 8 categories, enabling developers and AI assistants to identify bottlenecks and apply best practices.

This approach improves React component rendering and JavaScript performance by targeting re-render optimization and client-side efficiency. It provides actionable rules to reduce unnecessary renders and streamline JavaScript execution across your web application.

When optimizing bundle size in Next.js, this Skill covers 8 distinct performance categories including server-side performance, client-side data fetching, and advanced patterns. It delivers specific rules to reduce bundle size and improve overall web development speed.