vercel-react-best-practices

Optimize React and Next.js performance during code reviews by applying Vercel engineering guidelines across 8 priority categories. Review components for bundle size, eliminate data fetching waterfalls, and enforce parallel fetching and caching rules.

The best way to reduce bundle size in a Next.js application is applying code-splitting and bundle size optimization rules. Analyze client and server boundaries to ensure only necessary JavaScript loads on the client.

Eliminating waterfalls improves server-side performance by parallelizing data fetches across client and server boundaries. This prevents sequential blocking requests and significantly speeds up React rendering.

Refactor React components for re-render optimization when client-side data fetching causes unnecessary UI updates. Apply advanced patterns and caching strategies to prevent redundant renders and improve JavaScript performance.

Yes, you can use these React best practices for both client and server components. The guidelines target data-fetch patterns and rendering performance across client and server boundaries in Next.js pages.

Limitations of applying React server patterns include managing complex state transitions across client and server boundaries. Refactoring requires careful dependency tracking to avoid breaking existing data-fetch logic.