react-best-practices

Fix React and Next.js rendering performance issues by applying best practices that eliminate data fetching waterfalls, enforce strategic dynamic imports, and optimize server/client boundaries to improve application speed and user experience.

The best way to structure server/client boundaries in Next.js is to follow codified performance rules that separate server and client components strategically, optimizing data fetching and rendering patterns to speed up interactive performance.

Use Suspense in React to improve rendering performance when you need to enforce patterns that avoid data waterfalls and optimize component loading, which enhances the overall user experience during server-side rendering.

Audit a React component against Next.js performance best practices by checking it against structured rules and checklists covering immutable data transformations, bundle optimization, and data fetching strategies to identify and address subtle regressions.