vercel-react-best-practices

Eliminate React and Next.js performance pitfalls by applying Vercel engineering best-practice refactoring rules to existing code. It targets waterfalls, unnecessary re-renders, bundle bloat, and inefficient RSC props serialization to make applications load faster.

Optimize React Server Components props serialization by applying rule-driven guidance for server caching, auth, and data handling. It identifies inefficient serialization patterns and provides correct refactoring structures to improve rendering efficiency.

Parallelize async data fetching in Next.js by applying specific refactoring rules for async waterfall elimination. It provides actionable patterns to restructure sequential data requests into parallel operations, significantly improving load times.

Yes, the refactoring approach works for both code review and automated remediation. Its rule categories and consistent guidance are structured to support automated review, refactoring, and code generation during feature implementation.

Use Suspense boundaries for streaming in Next.js when you need to optimize rendering efficiency and handle server/client data fetching. The guidance provides correct patterns for implementing streaming to improve application responsiveness.

Unnecessary re-renders occur due to inefficient client state and effect optimization. Apply the skill's rule-driven guidance to refactor client state management, eliminating unnecessary re-renders and improving overall rendering efficiency.