vercel-react-best-practices

You can eliminate React data waterfalls by applying vetted server-side fetching patterns and prioritizing parallel data loads. This skill provides concrete, real-world guidance including trade-offs and code examples to drive automated refactoring for faster component rendering.

The best way to reduce bundle size is to follow specific optimization patterns outlined in this skill, which cover server-side performance and advanced JavaScript performance techniques. These guidelines provide measurable impact to improve TTI, FID, and overall bundle size.

Yes, you can use these Next.js best practices for refactoring existing code, reviewing performance issues, and writing new pages. The guidelines apply across 8 priority-driven categories to help improve rendering performance and reduce bloated bundles.

Your React component may re-render excessively due to inefficient client-side data fetching or poor rendering patterns. This skill provides re-render optimization rules with concrete code examples and measurable impacts to tune component performance.

No specific dependencies are required to apply these server-side patterns. The skill enforces a rigid metadata schema with machine-readable fields for automation but operates dependency-free to help you implement Vercel React best practices directly.