vercel-react-best-practices

Fixing React and Next.js performance issues requires identifying and resolving inefficiencies like data waterfalls and oversized bundles. You can apply rule-driven guidance to parallelize async flows, implement dynamic imports, and optimize bundle sizes during code reviews.

Optimizing server-side data fetching in Next.js involves hoisting static I/O and enforcing safe server patterns. You should apply per-request and cross-request caching strategies alongside server-side authentication checks to prevent data fetching inefficiencies.

Yes, you can use automated refactoring to reduce bundle size in React components. By applying agent-optimized examples with clear incorrect and correct code patterns, you can implement conditional and dynamic imports to automatically shrink oversized bundles.

Yes, this approach works for verifying Server Actions and API routes in Next.js. It provides a comprehensive checklist to detect correctness issues, ensuring your server-side boundaries and API routes follow advanced performance patterns and safe authentication checks.

You should parallelize async flows to eliminate waterfalls in React because sequential data fetching severely hurts real user metrics. Enforcing parallelized async flows ensures efficient data loading and prevents cascading render delays in your components.