vercel-react-best-practices

Optimize React and Next.js performance by applying Vercel best practices across components, pages, and data-fetching patterns to reduce waterfalls, improve TTI/LCP, and shrink bundle sizes using concrete refactor suggestions.

Vercel's best practices for reducing data fetching waterfalls involve refactoring Next.js pages and data-fetching patterns to parallelize requests and apply Suspense, minimizing sequential loading delays and improving Largest Contentful Paint.

Audit React components for bundle size and rendering optimizations by running a quick review to surface recommended changes, such as applying dynamic imports and server/client component splits aligned with Vercel guidelines.

You can apply these Next.js performance refactoring rules on an existing codebase. The skill outputs concrete code-change suggestions across 57 rules defined in eight priority categories, targeting existing React components and pages.

Use dynamic imports and Suspense to improve Next.js TTI when you need to delay loading non-critical JavaScript and reduce render-blocking waterfalls, directly targeting Time to Interactive improvements during component refactoring.