vercel-react-best-practices

React and Next.js performance optimization involves applying prioritized patterns for component rendering, data fetching, and bundle size reduction. This Skill defines 62 rules across 8 categories with concrete examples to guide refactoring and code generation.

To reduce bundle size in a Next.js application, apply code-splitting patterns and optimized data fetching rules. This Skill provides prioritized guidance for refactoring components and pages to minimize runtime bloat and improve loading waterfalls.

Handling server-side and client-side data fetching in React requires specific patterns to avoid waterfalls. This Skill outlines rules for optimizing data fetching workflows in Next.js pages, ensuring efficient rendering and prioritized loading.

Yes, these React performance rules are applicable for code reviews and refactoring. The 62 rules offer clear guidance and concrete examples to identify performance bottlenecks and automate refactoring tasks across React and Next.js components.

The best way to fix rendering waterfalls in Next.js is to apply prioritized performance patterns for data fetching and component design. This Skill provides targeted rules to identify and resolve waterfall issues during code authoring and reviews.