vercel-react-best-practices

To optimize React performance, apply Vercel best practices like per-route data fetching and parallel requests to eliminate waterfalls. This structured rule set provides practical guidance for refactoring client and server components to improve load times and interactivity.

Reducing bundle size in Next.js involves applying dynamic imports and code-splitting patterns. This Skill codifies 45+ rules across 8 categories, prioritizing bundle-size optimization and rendering improvements to enable automated refactoring and lower TTI.

Suspense boundaries in React components isolate loading states and prevent waterfall rendering. This Skill enforces proven Vercel engineering patterns for applying Suspense and code-splitting across server and client components to preserve UX while reducing LCP.

Yes, you can automate code reviews for React performance issues using this structured rule set. It provides guardrails and examples that enable tooling to automatically identify suboptimal rendering patterns and generate refactored code for Next.js apps.

Yes, this React optimization guidance applies directly to both client and server components. It covers data fetching, code-splitting, and rendering optimizations across React apps and Next.js pages to consistently enforce Vercel best practices during development.

Use dynamic imports in Next.js when optimizing initial load times and reducing large bundle sizes. This Skill provides guardrails to identify suboptimal rendering patterns and instructs tooling to implement dynamic imports and Suspense boundaries for better interactivity.