vercel-react-best-practices

The best way to improve React and Next.js rendering performance is applying consolidated patterns for server components, code-splitting, and data fetching to optimize TTI and LCP metrics.

Avoid data fetching waterfalls in Next.js by evaluating your current fetching logic and applying structured refactoring patterns to parallelize requests across server and client components.

Optimize bundling and code-splitting in a React codebase by enforcing performance discipline during component generation, ensuring safe and secure patterns that prevent bundle bloat and regressions.

You need server components versus client components when optimizing rendering performance, applying specific patterns to shift heavy logic server-side and reduce client-side JavaScript execution.

You can automate refactoring React components to reduce slow renders by applying guided code generation patterns that restructure pages and bundles while maintaining safety and security constraints.