vercel-react-best-practices

name	vercel-react-best-practices
description	React and Next.js performance optimization guidelines from Vercel Engineering. Use when building or reviewing React and Next.js applications to ensure optimal performance, including eliminating waterfalls, reducing bundle size, optimizing server-side performance, client-side data fetching, re-render optimization, and rendering performance. Contains 70 rules across 8 categories.
license	MIT
metadata	{"author":"vercel-labs","version":"1.0.0"}

React & Next.js Best Practices

Performance optimization guidelines from Vercel Engineering for building fast, efficient React and Next.js applications.

When to Use This Skill

Apply when:

• Building new React or Next.js applications
• Reviewing existing code for performance issues
• Optimizing page load times and bundle sizes
• Improving server-side rendering performance
• Reducing unnecessary re-renders
• Making data-fetching decisions

The 8 Categories (70 Rules)

1. Eliminating Waterfalls (CRITICAL)

Waterfalls occur when requests happen sequentially instead of in parallel, adding latency to every step.

• Parallelize data fetching — fetch independent data in parallel, not sequentially
• Avoid nested loading — don't block rendering on sequential requests
• Use Promise.all for independent server-side fetches