vercel-react-best-practices

Fix React and Next.js performance bottlenecks by applying priority-driven guidelines across 8 categories including bundle size, server-side performance, and re-render optimization to guide automated refactoring and code reviews.

Vercel React best practices for server and client interactions require immutable patterns, efficient data loading, safe server-actions practices, and robust caching and suspense strategies across components, pages, and APIs.

Reduce bundle size and optimize rendering in Next.js applications by applying concrete rules and automation-friendly templates that illustrate correct versus incorrect implementations for safer, faster improvements at scale.

This Next.js performance optimization approach works with existing React codebases by reviewing and applying prioritized performance improvements targeting rendering, data fetching, and bundle optimization across components, pages, and APIs.

Use suspense strategies and safe server-actions for client data fetching when addressing common real-world application bottlenecks, requiring adherence to immutable patterns and efficient data loading to prevent performance regressions.