vercel-react-best-practices

To eliminate data fetching waterfalls in your React and Next.js project, apply parallel data fetching patterns and Suspense boundaries to unblock rendering and reduce sequential network requests. This skill enforces specific rules to detect and remediate these waterfall bottlenecks.

The best way to reduce bundle size and improve TTI in a Next.js application is to apply bundle optimization rules, including code splitting and dynamic imports. This skill provides vetted guidelines to detect large bundles and optimize client-side JavaScript performance.

To optimize server-side rendering performance for React components, review your data flows and apply server-side performance rules to ensure efficient data fetching. This skill identifies bottlenecks across pages and components to enforce production-grade SSR improvements.

Yes, you can use these React best practices for code reviews and refactoring existing components. The skill applies a comprehensive rule set across 8 categories to evaluate data fetching, rendering, and bundle size, making it effective for production-grade refactors.

Your React app has slow rendering and large bundle size due to inefficient data fetching patterns and unoptimized client-side JavaScript. This skill identifies these exact performance bottlenecks and enforces 57 rules across rendering and bundle optimization to remediate them.

Yes, this performance optimization approach works with Suspense boundaries and client-side data fetching. It includes targeted rules for optimizing Suspense boundaries and client-side data flows to achieve faster TTI and LCP in your React and Next.js application.