vercel-react-best-practices

To optimize React and Next.js performance, apply proven best practices that eliminate data fetching waterfalls and minimize bundle size across server and client boundaries. This Skill provides concrete patterns across eight priority categories to guide automatic refactoring and ensure scalable improvements.

The best way to improve data fetching and rendering in Next.js server components is to apply targeted refactoring patterns that enforce safe server and client boundaries. This Skill enforces rules across server-side and rendering categories with concrete guardrails to achieve faster time to interactive.

Prevent unnecessary re-renders and optimize client-side performance by applying concrete anti-patterns and guardrails defined across client-side and re-render priority categories. This Skill guides performance-focused refactoring to ensure safe, scalable improvements for React components.

Yes, this React performance playbook covers advanced patterns for web vitals optimization. It includes a dedicated advanced patterns category alongside rules for JavaScript and bundle size to guide automatic refactoring and code generation for faster TTI and improved user experience.

Yes, you can use these guidelines to review and migrate existing React components to server components. The playbook provides practical patterns with code examples and anti-patterns specifically designed for development, reviews, and migrations across server and client boundaries.