vercel-react-best-practices

Optimize React and Next.js performance by applying 57 established rules across eight priority categories, targeting waterfalls, bundle size, server-side rendering, and client-side data fetching to guide automated refactoring and code generation.

Reduce bundle size and eliminate waterfalls by applying concrete patterns for code-splitting, lazy loading, and parallel data fetching provided within the priority rule categories to optimize server and client boundaries.

Refactor React components for better Time to Interactive by auditing critical bottlenecks like large initial payloads, then applying the corresponding rendering optimization and code-splitting rules from the categorized guideline sets.

Yes, the rule sets apply to writing new components, reviewing existing code, and refactoring to achieve consistent performance gains, ensuring teams prevent common bottlenecks and regressions in production-grade codebases.

The guidelines focus on established best practices for server actions and rendering optimizations but require manual identification of critical bottlenecks in your specific project architecture before applying the corresponding rule.

Yes, it provides concrete examples and actionable patterns for code-splitting, lazy loading, parallel data fetching, server actions, and rendering optimizations to improve server-side performance and reduce bundle payloads.