vercel-react-best-practices

Optimize React and Next.js performance by applying best practices across server actions, suspense, code-splitting, serialization, and caching to improve reliability and speed. This approach consolidates patterns to boost load times and UX.

Reduce Next.js bundle size by applying code-splitting and JavaScript performance best practices. This skill provides concrete guidance and rules to drive automated refactoring, code generation, and reviews for bloated bundles.

Eliminate data fetching waterfalls in React components by utilizing client-side data fetching and suspense best practices. This ensures reliable code generation and standardizes performance-focused decisions across teams.

Yes, this approach works for both server-side rendering and client-side data fetching. It enforces rules across eight categories including server actions, caching, and suspense to guide safe code generation.

Use Suspense to improve rendering performance in Next.js when you need to eliminate waterfalls and optimize re-renders. Applying these best practices helps standardize performance-focused decisions during architecture planning.