vercel-react-best-practices

To optimize React and Next.js performance, apply Vercel's best-practice guidelines covering server components, data fetching, suspense, and bundle size reduction. This provides 57 actionable rules across 8 priority categories to guide automated refactoring and eliminate critical rendering waterfalls.

The best way to reduce bundle size in a Next.js application is to apply dynamic imports and bundle optimization patterns. This skill codifies explicit rules for code splitting and suspense boundaries to minimize runtime size and improve Time to Interactive.

Server components and suspense boundaries improve React optimization by shifting data fetching to the server and enabling progressive rendering. This skill delivers explicit patterns for utilizing these mechanisms to reduce client-side bottlenecks and ensure high-performance code.

Yes, you can apply these React best practices without special tooling. The skill requires only standard React and Next.js concepts, delivering explicit rules and examples to guide automated refactoring tasks directly within your existing project environment.

You should apply dynamic imports for React performance optimization when reducing initial bundle size and deferring non-critical component loading. This skill provides actionable patterns to determine exactly when and how to implement dynamic imports alongside suspense.