vercel-react-best-practices

React and Next.js performance optimization involves applying 57 prioritized rules across 8 categories, focusing on client/server patterns, Suspense, dynamic imports, and bundle optimization to reduce waterfalls and SSR latency.

Reduce Next.js bundle size by applying best-practice patterns for dynamic imports and bundle optimization. This skill guides automated refactoring to enforce rules that minimize load times and improve overall performance.

Use React server components for data fetching to reduce waterfalls and improve SSR latency. The skill provides prioritized guidance on client/server patterns and parallel data fetching to optimize production-grade apps.

Yes, you can use these patterns to refactor existing production code. The skill guides automated refactoring and code generation by prioritizing impact, helping you identify and implement the top patterns to iterate on performance improvements.

No specific dependencies are required. The skill applies to tasks involving writing, reviewing, or refactoring React components and Next.js pages, enforcing best-practice rules for data fetching, server actions, and per-request caching.

The best way to implement parallel data fetching is by applying Vercel's best-practice patterns. This skill guides you through production-grade patterns including server actions and per-request caching to reduce data waterfalls.