vercel-react-best-practices

To fix React data fetching waterfalls, apply categorized performance rules that optimize server and client data fetching strategies. This approach eliminates sequential request waterfalls, directly improving Time to Interactive and Largest Contentful Paint metrics.

Best practices for React component rendering and bundle size involve applying category-driven rules for SSR and CSR patterns alongside bundling optimizations. These actionable guidelines provide concrete examples and refactoring steps to reduce initial load times.

Using server actions safely requires following curated performance constraints that guide their design and data fetching patterns. By applying these actionable rules, you prevent waterfalls and ensure speed and reliability during automated refactoring or code reviews.

This approach works for both auditing existing apps and new component design. You can audit a React or Next.js page using the categorized guidelines, identify bottlenecks, and implement top-priority fixes to optimize speed, reliability, and rendering patterns.

You should optimize client or server data fetching based on categorized rules that target specific rendering and performance patterns. The guidelines distinguish when to use SSR or CSR strategies to eliminate waterfalls and achieve measurable outcomes for real-world projects.