vercel-react-best-practices

Fix waterfall data fetching in Next.js by identifying sequential blocking fetches and applying Promise parallelization. This Skill detects waterfall patterns and recommends parallel data fetching to eliminate server and client bottlenecks during code review.

Reduce React bundle size by applying dynamic imports, bundle-splitting strategies, and targeted resource hints. This Skill provides concrete advice on bundle size optimization to meet performance constraints and improve time-to-interactive in Next.js applications.

Memoization improves React rendering optimization by caching previous computation results and preventing unnecessary re-renders. This Skill suggests caching strategies and memoization techniques to minimize re-renders and speed up React and Next.js applications.

Yes, you can use these rules to audit a Next.js page that suffers from slow initial load. The ruleset identifies blocking fetch sequences and oversized bundles to produce targeted fixes for time-to-interactive.

Yes, this guide covers both server-side and client-side performance. It provides a prioritized ruleset of 69 rules to eliminate bottlenecks across server and client data fetching patterns, bundling, and rendering optimizations.