vercel-react-best-practices

To optimize React and Next.js performance during refactoring, apply curated best practices like avoiding data fetching waterfalls, reducing bundle size, and enabling strategic Suspense boundaries to improve TTI and LCP.

Best practices for reducing Next.js bundle size include using dynamic imports, avoiding barrel imports, and applying strategic Suspense boundaries to improve initial paint and responsiveness.

Strategic Suspense improves React rendering performance by establishing boundaries that prevent waterfall data fetching, enabling faster initial paint and better responsiveness while data loads asynchronously.

Yes, these performance guidelines apply directly to React server components, Next.js pages, and client-side data fetching patterns to prevent common performance pitfalls during development and reviews.

Avoiding waterfalls improves Next.js server-side performance by preventing sequential data fetching blocks, which reduces load times and directly enhances core web vitals like LCP.

Use dynamic imports in React when you need to reduce initial bundle size and improve Time to Interactive, especially for heavy components that delay first paint during page load.