vercel-react-best-practices

To optimize React and Next.js performance, apply a structured set of rules that enforce avoiding barrel imports, enabling parallel data fetching, and using dynamic imports, which collectively reduce bundle size and improve LCP.

The best way to eliminate data fetching waterfalls in Next.js is to enable parallel data fetching and implement suspense boundaries, ensuring data loads concurrently rather than sequentially to significantly improve rendering performance.

Refactor React components for re-render optimization by applying structured rules across client-side data fetching and rendering patterns, utilizing dynamic imports and server-side checks in server actions to minimize unnecessary JavaScript execution.

No, the guidelines apply across components, pages, and bundling scenarios, but they specifically enforce server-side checks within server actions to optimize server-side performance and ensure safer data handling.

Use dynamic imports and suspense boundaries when aiming to minimize bundle sizes and eliminate rendering waterfalls, as these advanced patterns allow code to load concurrently and improve overall Time to Interactive metrics.

Barrel imports limit web optimization by bundling unnecessary dependencies, increasing payload sizes and negatively impacting TTI; the guidelines enforce avoiding barrel imports to ensure smaller, more efficient bundle outputs.