react-best-practices

Fix slow initial page loads by identifying and resolving sequential data fetching waterfalls and optimizing JavaScript bundle size. This skill audits your React and Next.js application to provide actionable solutions based on Vercel Engineering best practices.

Data fetching waterfalls in React are sequential data loads where dependencies block subsequent requests, delaying page render. This skill helps you identify these sequential patterns and offers optimization strategies to parallelize fetching and improve server-side rendering efficiency.

Reduce JavaScript bundle size in React by applying optimization strategies that target unnecessary dependencies and inefficient code splitting. This skill audits your project to pinpoint performance pitfalls and offers best practices to minimize the final bundle payload.

Yes, you can use these strategies to address server-side rendering inefficiencies. The skill provides a comprehensive guide to optimizing React and Next.js application performance, specifically targeting excessive re-renders and server-side bottlenecks.

The best way to audit for React performance bottlenecks is to review the project for critical issues like large bundle sizes and slow page loads. This skill performs a comprehensive performance audit to identify common pitfalls and offer actionable solutions.