vercel-react-best-practices

Optimize React and Next.js performance by applying Vercel best practices across eight categories including async improvements, bundle size reduction, and rendering performance. You get a structured set of rules for reviewing and refactoring components, API routes, and data-fetching logic.

Refactor Next.js server actions and API routes by following concrete patterns for per-request caching, security, and immutability. This approach provides testable steps and modular design patterns to maximize efficiency across your Next.js project.

Dynamic imports and Suspense usage improve Next.js client-side fetching by optimizing rendering performance and reducing initial bundle size. Applying these patterns ensures efficient data fetching and component loading strategies.

Yes, you can use these React best practices for AI-assisted code reviews and refactoring. The guide provides an AI-friendly reference that outputs a prioritized refactor plan adhering to security, immutability, and modularization requirements.

You should evaluate server-side rendering limitations when client-side fetching and re-rendering optimizations better suit your component design. The guide helps distinguish when to apply server-side versus client-side patterns based on specific performance bottlenecks.

Your Next.js bundle size increases when components are not properly modularized or dynamically imported. Applying Vercel best practices for bundle size reduction and advanced patterns ensures efficient code splitting and modular component design.