vercel-react-best-practices

Optimize React and Next.js applications by applying rule-based guidance to refactor components, fix data fetching patterns, and reduce bundle sizes. This involves identifying bottlenecks like sequential fetches and heavy imports, then replacing them with direct imports and dynamic loading.

Reduce bundle size by replacing heavy barrel imports with direct imports and deferring non-critical libraries. The Skill provides actionable checklists to diagnose bundle bloat and apply code refactoring techniques for lower overhead and faster load times.

Eliminate data fetching waterfalls by refactoring sequential fetches into parallel patterns. The Skill reviews client-side data fetching flows and provides specific recommendations to restructure components for optimized runtime performance.

Yes, the performance best practices apply to server-side rendering pages by enforcing server and client performance patterns. You can inspect Next.js pages, identify bottlenecks, and apply targeted refactoring rules to improve load times.

Use dynamic imports for heavy React components during code reviews or refactors to defer non-critical libraries and lower initial bundle size. The Skill identifies heavy components and applies lazy loading guidelines to speed up application load times.