vercel-react-best-practices

Eliminate data fetching waterfalls in React by implementing parallel data fetching patterns. This skill identifies sequential fetching opportunities and enforces rules to restructure data loading for improved web vitals and faster server-actions execution.

Suspense in Next.js is best used to handle asynchronous rendering by showing fallback UI while data loads. This skill provides explicit guidance on applying Suspense patterns correctly to prevent blocking the main thread and improve user experience.

Yes, this skill covers Next.js server-actions security considerations alongside client and server rendering patterns. It provides targeted rules to ensure secure implementation when refactoring data fetching and mutation logic.

Avoid duplicate serialization in React by enforcing rules that streamline data passing across client and server boundaries. This skill analyzes your codebase to identify redundant serialization patterns and recommends optimizations to reduce bundle size and improve performance.

Yes, you can use this skill to review bundle optimization in an existing Next.js codebase by scanning for dynamic import opportunities and inefficient component designs. It maps 57 rules across 8 categories to help you target critical refactoring areas.