vercel-react-best-practices

To optimize React performance, you must reduce data fetching waterfalls by enabling parallel data fetching and using React.cache(). This skill enforces concrete engineering rules across component authoring and routing to improve load times.

Trimming bundle size requires avoiding barrel imports to prevent unused code from entering the build. Applying prioritized best practices audits your component structure and enforces concrete requirements for smaller, more efficient bundles.

Auditing a React component involves applying a prioritized set of 8 category rules to identify common anti-patterns. You evaluate component authoring, data fetching, and server-side rendering to find and replace inefficient code.

Yes, these performance best practices apply to both server and client rendering in Next.js. The rules guide optimizations across SSR and CSR strategies, ensuring faster load times and reliable user experiences across environments.

You should use React.cache() when aiming to minimize data fetching waterfalls and optimize server-side rendering. It enables parallel data fetching strategies, which reduces sequential waits and improves application stability.

Default Next.js data fetching can create sequential waterfalls and bloated bundles if not carefully managed. Without enforcing parallel fetching and avoiding barrel imports, applications suffer from slower load times and unstable performance.