vercel-react-best-practices

React and Next.js performance optimization involves minimizing bundle size, parallelizing data fetching, improving server-side rendering efficiency, and reducing unnecessary re-renders. This Skill provides 57 prioritized rules across 8 categories to guide these improvements.

To reduce bundle size and fix data fetching waterfalls in Next.js, apply rules that prioritize parallel data fetching and efficient code splitting. This Skill provides specific guidelines for refactoring client-side fetching and minimizing JavaScript payload.

An AI agent can automatically refactor React components for performance by applying this Skill's rules. It guides AI agents in writing and reviewing code to optimize re-renders, rendering execution, and overall JavaScript performance.

Optimizing server-side rendering in React is most effective when following structured rules for SSR efficiency. This Skill covers advanced patterns and rendering performance to ensure your Next.js application delivers a faster user experience.

This React performance optimization guide requires no specific dependencies. It provides standalone scripts and references containing 57 rules across 8 categories, which can be applied to any existing React and Next.js codebase.