vercel-react-best-practices

Optimize React and Next.js performance by applying 57 structured best-practice rules across rendering, data fetching, and bundle size. These guidelines enforce deterministic patterns for SSR, Suspense, and server actions to resolve inefficiencies.

Best practices for eliminating waterfalls and reducing bundle size involve applying targeted rules across 8 categories. Centralized guidelines validate server/client interactions and code-splitting patterns to patch optimization gaps.

Use Suspense and Server Actions for client-side data fetching when adhering to validated best-practice patterns. The 57 rules provide actionable guidance on categorizing and safely applying these advanced patterns in real-world projects.

You can use these React performance rules for code reviews, performance audits, and automated code generation. The guidelines include safety checks and validation logic that provide deterministic guidance for automated tooling hooks.

Structure re-render optimization and server-side performance by applying categorized rules across components and pages. The guidelines enforce clear validation and safety checks across 8 categories to ensure deterministic performance outcomes.

This approach works for both existing React codebases and new Next.js pages. Review your current project to apply the 57 rules across rendering, bundling, and server/client interactions, guiding both refactoring and new development.