vercel-react-best-practices

To eliminate React waterfalls, parallelize data fetching requests instead of nesting them sequentially. This skill provides a prioritized rule catalog to identify waterfall patterns and apply parallel fetching strategies to speed up server-side rendering.

The best way to optimize Next.js bundle size is applying code-splitting and removing unnecessary client-side JavaScript. This skill codifies bundle size optimization rules to audit your project and enforce dynamic imports, systematically reducing bloated bundles.

Use React server components for data fetching and static rendering to reduce client JavaScript, and client components only for interactivity. This skill provides clear guidance for both server and client patterns to systematically optimize rendering performance across the stack.

To stop unnecessary React re-renders, apply component memoization and optimize state placement to prevent cascading updates. This skill includes re-render optimization rules with concrete examples to guide automated refactoring and measurable performance gains.

Yes, you can audit an existing React codebase by applying the prioritized performance rules from critical to low priority. This skill codifies a rule catalog with concrete transformation guidance to systematically identify and refactor inefficient rendering patterns.

Your Next.js page loads slowly due to inefficient server-side rendering patterns, data waterfalls, or bloated bundles. This skill helps identify and enforce performance best practices to reduce waterfalls, optimize bundles, and speed up SSR and CSR.