vercel-react-best-practices

To optimize React components for performance, apply patterns like Suspense, dynamic imports, and server components to reduce bundle size and improve rendering. This Skill guides you through auditing React components and Next.js pages to surface top-priority optimizations based on Vercel Engineering guidelines.

The best way to reduce bundle size in Next.js is by applying dynamic imports and server components to split code efficiently. This Skill helps identify and apply bundle optimization best practices to eliminate bottlenecks and deliver faster web apps.

Suspense enables parallel loading in Next.js server components by allowing the UI to render progressively as data resolves. This Skill provides best-practice patterns for implementing Suspense alongside server components to improve TTI and LCP across large applications.

Yes, you can audit existing React code for per-render optimizations by prompting the assistant to review and refactor your components. This Skill analyzes your React and Next.js code to identify and apply per-render optimizations during code review workflows.

A slow LCP on Next.js pages is often caused by inefficient data fetching, large bundle sizes, or blocking renders. Fix it by applying server components, Suspense, and bundle optimization patterns guided by this Skill to improve load reliability and speed.

Dynamic imports are a key pattern to improve TTI in large React apps by lazily loading non-critical code. This Skill helps you identify where to apply dynamic imports and other per-render optimizations to eliminate bottlenecks and deliver faster web apps.