vercel-react-best-practices

Optimize React and Next.js performance by applying structured rules for server actions, Suspense boundaries, memoization, and bundle optimization during component development and refactoring. This enforces guardrails for security, accessibility, and maintainability across 57 priority-driven rules.

Best practices for data fetching and bundle optimization in Next.js involve using server actions, defining Suspense boundaries, ensuring safe data serialization, and applying memoization to reduce large bundles and improve load times.

Suspense usage improves React performance by establishing boundaries that streamline data fetching and rendering, which enhances interactivity and scalability while maintaining safe server-client boundaries.

You can use these React optimization patterns for code reviews and refactoring existing pages, as the rules are designed to guide AI-assisted refactoring and enforce maintainability, security, and accessibility guardrails.

React apps suffer from performance regressions due to inefficient data fetching, large bundles, and suboptimal server-client boundaries, which you can resolve by applying centralized rules for minimal serialization and optimized rendering patterns.