vercel-react-best-practices

Optimize React and Next.js performance by applying Vercel Engineering best practices to eliminate waterfalls, optimize bundles, and structure server-side data fetching. This skill enforces consistent rules across codebases to improve TTI, LCP, and UX.

Avoid data fetching waterfalls in Next.js by applying parallel fetches and per-request deduplication patterns. This skill provides rule-driven guidance to structure data fetching correctly and reduce unnecessary hydration risks.

Use Suspense in Next.js to improve page rendering by applying guidelines that structure async data fetching and component rendering. This skill provides rules for proper Suspense usage to enhance server-side performance and UX.

Yes, this skill helps secure Next.js server actions by providing rule-driven guidance for proper server actions security. It ensures automated review tasks meet performance and security goals across client and server codebases.

Prevent bundle size bloat from barrel imports in React by applying bundle optimization rules from this skill. It guides you to avoid barrel imports and structure components to eliminate unnecessary JavaScript payload.

Yes, you can use this skill to refactor existing Next.js pages for better LCP by applying top-priority rule sets. It guides refactoring sessions to improve TTI, LCP, and UX through optimized rendering and data fetching patterns.