vercel-react-best-practices

Optimize React and Next.js performance by eliminating data waterfalls, reducing bundle size, and improving rendering performance. Applying over 50 targeted rules across 8 categories ensures faster load times and smoother user experiences in your applications.

The best way to reduce bundle size in a Next.js application is to dynamically import heavy components using `next/dynamic`. This defers loading non-critical JavaScript, significantly improving initial page load times and overall rendering performance.

Eliminate data fetching waterfalls in React applications by optimizing both server-side and client-side data fetching patterns. Restructuring sequential requests into parallel ones prevents delayed rendering and improves overall application performance.

Yes, you can use this to automatically refactor React components for code quality and performance. It is designed for AI agents to review and refactor codebases, applying advanced patterns to optimize re-renders and JavaScript performance.

Your Next.js page loads slowly because of unoptimized bundle size, data waterfalls, or excessive re-renders. Addressing these specific performance pitfalls through targeted rendering and JavaScript optimization rules resolves the bottleneck.