What problem does it solve? React and Next.js applications often suffer from slow page loads, large bundles, sequential data fetching waterfalls, and unnecessary re-renders. This Skill provides a structured, impact-prioritized rule set from Vercel Engineering to diagnose and fix these performance issues systematically. ## Core Features & Use Cases - Waterfall Elimination: Rules for parallel data fetching with Promise.all(), dependency-based parallelization, Suspense boundaries, and Next.js 16 after()/connection() APIs. - Bundle Size Optimization: Guidance on avoiding barrel file imports, dynamic imports with next/dynamic, conditional module loading, and preloading based on user intent. - Server & Client Optimization: Covers Server Action authentication, RSC serialization minimization, React.cache() deduplication, SWR patterns, re-render reduction, and Next.js 16 cache components (use cache, cacheLife, cacheTag, PPR). - Use Case: When reviewing a slow Next.js page, follow the quick decision tree to identify whether the issue is waterfalls, bundle size, SSR, or re-renders, then read only the relevant section and apply the fixes in priority order. ## Quick Start Review my Next.js page component for performance issues and fix any data fetching waterfalls or bundle size problems.
