vercel-react-best-practices

To identify React and Next.js performance best practices during a code review, evaluate components against guidelines covering waterfall elimination, bundle optimization, and per-request caching. This produces actionable optimization tasks for refactoring.

The best way to eliminate render waterfalls and optimize bundle size in Next.js is by implementing dynamic imports, Suspense boundaries, and code-splitting. These techniques shrink bundles and accelerate initial paint by delaying non-critical JavaScript.

To implement safe server actions and per-request caching in a React codebase, apply categorized guidelines for server-side performance and client data fetching. This ensures data retrieval is isolated per request while maintaining secure server mutations.

Yes, this approach to React performance optimization works for both writing new components and refactoring existing pages. The guidelines are designed to be applied proactively during development and retroactively to hit specific performance targets.

Relying on dynamic imports and Suspense boundaries for rendering improvements requires careful categorization to avoid blocking interactions. While they accelerate initial paint, improper boundary placement can still cause client-side data fetching waterfalls if not reviewed.