vercel-react-best-practices

To optimize React and Next.js performance during code reviews, apply a structured rule set covering bundle optimization, server-side efficiency, and re-render strategies. This provides 57 actionable rules with practical code examples to identify and resolve loading and runtime bottlenecks.

Best practices for reducing bundle size in Next.js involve applying specific bundle optimization rules, such as analyzing client-side JavaScript tweaks and rendering patterns. The skill provides targeted guidance to eliminate unnecessary code and streamline client bundles.

To prevent data fetching waterfalls in React server components, apply rules focused on eliminating sequential fetches and improving server-side performance. The guidelines help restructure data fetching logic to load data in parallel and optimize server/client rendering efficiency.

Yes, you can use these React performance guidelines for refactoring existing codebases. The rules are ideal for raising performance benchmarks across both new and refactored React/Next.js code, offering implementation steps for data fetching, rendering, and bundle improvements.

You should optimize client-side data fetching versus server-side rendering in Next.js by evaluating rules across both categories. The skill provides distinct guidance for server-side performance and client-side fetching to help determine the most efficient rendering pattern for your components.