vercel-react-best-practices

Reduce your Next.js bundle size by analyzing large dependencies, applying code-splitting, and enforcing best practices for server and client components to minimize initial load and improve First Contentful Paint.

Optimize React rendering by enforcing best practices across server and client components, ensuring proper data-fetching patterns, and refactoring components to eliminate waterfalls and minimize bundle sizes.

Apply performance best practices to a Next.js code review by checking new components and refactoring tasks against 57 rules covering waterfalls, bundle minimization, and rendering, delivering concrete code changes and rationale.

Yes, the approach fully supports server and client component data fetching by providing targeted performance patterns and concrete code examples to optimize rendering and eliminate waterfalls in both contexts.

Slow Time to Interactive in Next.js can persist despite code splitting due to remaining rendering bottlenecks and waterfalls; analyzing dependencies and enforcing server component optimizations helps reduce TTI.