vercel-react-best-practices

Optimize React and Next.js performance by applying 57 rules across 8 categories, targeting critical areas like eliminating data fetching waterfalls, reducing bundle size, and improving server-side rendering efficiency for faster load times.

Eliminating data fetching waterfalls in Next.js requires parallelizing data requests and optimizing server-side fetching strategies. This Skill provides specific refactoring examples to restructure sequential calls into parallel operations for better Time to Interactive.

Reduce bundle size in React by applying effective code-splitting techniques. This Skill offers guidance on splitting components dynamically to minimize the initial JavaScript payload and improve overall application loading speed.

Yes, this Skill covers both server-side and client-side rendering optimization. It provides comprehensive guidelines to improve rendering performance and data fetching efficiency across both environments in Next.js applications.

Refactor React components for performance optimization when developing new features in a Next.js app to ensure data fetching is parallelized and components are code-split. This prevents bottlenecks and ensures smoother user interactions.

Slow Time to Interactive in Next.js apps often stems from unoptimized data fetching waterfalls, large bundle sizes, and inefficient server-side rendering. This Skill provides rules to identify and refactor these specific bottlenecks.