vercel-react-best-practices

React and Next.js performance optimization involves applying curated rules for rendering, server/client boundaries, and data fetching to reduce bottlenecks. This Knowledge base provides categorized guidance and concrete examples to standardize performance-first outcomes across components and pages.

Optimizing server components and client boundaries in Next.js requires applying structured rules that dictate where data fetching occurs and how bundle size is managed. The guidelines serve as a reference during refactors to ensure proper server/client separation.

Standardizing performance reviews across a large React codebase involves using a consolidated set of best-practice guidelines during code reviews and new feature creation. This approach ensures consistent application of proven patterns for rendering and bundle optimization.

These React optimization rules can be used for automated code refactoring and code generation. The structured rule system provides actionable tips and concrete examples that drive automated refactoring tasks across pages, components, and data fetching layers.

You should review data fetching layers for Next.js performance bottlenecks during code reviews, refactors, and new feature creation. Applying performance-first guidelines to data fetching ensures faster UI experiences and reduces rendering bottlenecks across the project.

This approach works for both new feature creation and existing React refactors by serving as a comprehensive reference. It consolidates performance guidelines applicable to writing, reviewing, and refactoring tasks across components, pages, and bundle optimization.