vercel-react-best-practices

To eliminate data fetching waterfalls in React and Next.js, refactor sequential client-side requests into parallel server-side data fetching patterns. This Skill identifies inefficient fetching logic and applies structured guidelines to prevent cascading requests and reduce load times.

The best way to reduce bundle size in a Next.js application is to apply code splitting and optimize component imports. This Skill provides category-based guidelines to analyze your bundle strategy and refactor components, ensuring smaller payloads and faster runtime performance.

To optimize re-renders in React components, apply memoization and state management best practices to prevent unnecessary updates. This Skill reviews your component architecture and applies rendering performance guidelines to minimize wasted render cycles.

Yes, you can use Next.js server actions to improve server-side performance by moving data mutations and fetching closer to the database. This Skill provides clear guidance for refactoring server actions to optimize load times and runtime efficiency.

Fixing SSR and CSR inefficiencies involves correctly mapping data fetching and rendering patterns to server or client scenarios based on requirements. This Skill analyzes your Next.js pages and React components to apply best practices across both rendering environments.

You should avoid client-side data fetching in Next.js when the data is required for initial HTML rendering or when it creates request waterfalls. This Skill helps identify these constraints and refactors fetching patterns to server-side or advanced patterns for better performance.