vercel-react-best-practices

To optimize React and Next.js performance, apply a structured set of 58 best practices across 8 categories. These rules target slow initial renders by eliminating data-fetching waterfalls, reducing bundle size, and enforcing server-side performance patterns.

The best way to reduce Next.js bundle size is to apply specific bundle optimization rules from Vercel Engineering. This involves auditing your codebase against structured patterns to identify and refactor inefficient JavaScript imports and asset handling.

To eliminate data-fetching waterfalls in React components, apply structured waterfall elimination patterns during code review and refactoring. These rules optimize client-side data fetching and server-side data flows to prevent sequential loading delays.

To prevent unnecessary re-renders when writing React components, follow structured re-render optimization rules. These patterns guide how you write and refactor component data flow and rendering logic to minimize wasted render cycles.

Yes, you can use these performance patterns to refactor existing Next.js pages. The rules are designed to audit existing code, identify performance issues across your projects, and guide automated refactoring for faster loads.

Apply server-side performance patterns over client-side data fetching when initial load speed and bundle efficiency are critical. The rules prioritize server-side execution and server-actions to reduce client-side JavaScript execution and data fetching delays.