vercel-react-best-practices

To optimize React and Next.js performance, apply best practices like eliminating data waterfalls, parallel fetching, and code-splitting across server and client components to reduce bundle size and hydration time. This involves auditing pages and refactoring routes to minimize serialization.

The best way to reduce Next.js bundle size is through code-splitting and applying refactoring patterns that minimize serialization. Auditing your React components and routes helps identify anti-patterns, allowing you to generate a prioritized improvement plan for smaller bundles.

To eliminate data waterfalls in React Server Components, implement parallel data fetching patterns. Refactoring your data fetching logic prevents sequential blocking, improving startup time and overall runtime performance across your Next.js pages and API routes.

Yes, you can use automation-friendly rules and refactoring prompts to spot and fix React rendering anti-patterns. These rules translate into actionable tasks for AI agents to implement codebase changes, targeting components, pages, and API routes directly.

Slow Next.js hydration and rendering often stem from suboptimal data fetching, large bundle sizes, and heavy serialization. Auditing your React components for anti-patterns and applying code-splitting alongside parallel data fetching resolves these performance regressions.