ck:react-best-practices

To eliminate data fetching waterfalls in React and Next.js, enforce parallel fetching patterns using Promise.all and React.cache. This removes sequential request chains and improves Time to Interactive by loading data concurrently across server and client components.

The best way to reduce Next.js bundle size is to apply conditional and dynamic imports. This optimization strategy delays loading non-critical JavaScript, directly improving Largest Contentful Paint and initial page load performance.

Optimize React Server Components by enforcing minimal RSC serialization. Ensure safe caching and parallel server-side fetching to prevent passing large data payloads across the server-client boundary, which reduces rendering overhead.

Yes, you can use this to review existing React code for performance regressions. It applies 40+ prioritized rules to refactor components and pages, identifying sequential fetches and bundle bloat using wrong versus correct code samples.

Next.js automatic caching does not fully replace explicit client deduplication. You must apply techniques like SWR alongside safe caching rules to prevent duplicate requests and optimize client-side data fetching effectively.