96 lines
4.2 KiB
Markdown
96 lines
4.2 KiB
Markdown
|
---
|
||
|
|
name: vercel-react-best-practices
|
||
|
|
description: React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
|
||
|
|
license: MIT
|
||
|
|
metadata:
|
||
|
|
author: vercel
|
||
|
|
version: "1.0.0"
|
||
|
|
---
|
||
|
|
|
||
|
|
# Vercel React Best Practices
|
||
|
|
|
||
|
|
Comprehensive performance optimization guide for React and Next.js applications, maintained by Vercel. Contains 57 rules across 8 categories, prioritized by impact to guide automated refactoring and code generation.
|
||
|
|
|
||
|
|
## When to Apply
|
||
|
|
|
||
|
|
Reference these guidelines when:
|
||
|
|
|
||
|
|
- Writing new React components or Next.js pages
|
||
|
|
- Implementing data fetching (client or server-side)
|
||
|
|
- Reviewing code for performance issues
|
||
|
|
- Refactoring existing React/Next.js code
|
||
|
|
- Optimizing bundle size or load times
|
||
|
|
|
||
|
|
## Rule Categories by Priority
|
||
|
|
|
||
|
|
| Priority | Category | Impact | Prefix |
|
||
|
|
| -------- | ------------------------- | ----------- | ------------ |
|
||
|
|
| 1 | Eliminating Waterfalls | CRITICAL | `async-` |
|
||
|
|
| 2 | Bundle Size Optimization | CRITICAL | `bundle-` |
|
||
|
|
| 3 | Server-Side Performance | HIGH | `server-` |
|
||
|
|
| 4 | Client-Side Data Fetching | MEDIUM-HIGH | `client-` |
|
||
|
|
| 5 | Re-render Optimization | MEDIUM | `rerender-` |
|
||
|
|
| 6 | Rendering Performance | MEDIUM | `rendering-` |
|
||
|
|
| 7 | JavaScript Performance | LOW-MEDIUM | `js-` |
|
||
|
|
| 8 | Advanced Patterns | LOW | `advanced-` |
|
||
|
|
|
||
|
|
## Quick Reference
|
||
|
|
|
||
|
|
### 1. Eliminating Waterfalls (CRITICAL)
|
||
|
|
|
||
|
|
- `async-defer-await` - Move await into branches where actually used
|
||
|
|
- `async-parallel` - Use Promise.all() for independent operations
|
||
|
|
- `async-dependencies` - Use better-all for partial dependencies
|
||
|
|
- `async-api-routes` - Start promises early, await late in API routes
|
||
|
|
- `async-suspense-boundaries` - Use Suspense to stream content
|
||
|
|
|
||
|
|
### 2. Bundle Size Optimization (CRITICAL)
|
||
|
|
|
||
|
|
- `bundle-barrel-imports` - Avoid large barrel files; use direct imports
|
||
|
|
- `bundle-large-libraries` - Optimize heavy deps (e.g. framer-motion, lucide)
|
||
|
|
- `bundle-conditional` - Lazy load conditional components
|
||
|
|
- `bundle-route-split` - Split huge page components
|
||
|
|
- `bundle-dynamic-imports` - Use next/dynamic for heavy client components
|
||
|
|
|
||
|
|
### 3. Server-Side Performance (HIGH)
|
||
|
|
|
||
|
|
- `server-cache-react` - Use React.cache() for per-request deduplication
|
||
|
|
- `server-cache-next` - Use unstable_cache for data coaching
|
||
|
|
- `server-only-utils` - Mark server-only code with 'server-only' package
|
||
|
|
- `server-component-boundaries` - Keep client components at leaves
|
||
|
|
- `server-image-optimization` - Use next/image with proper sizing
|
||
|
|
|
||
|
|
### 4. Client-Side Data Fetching (MEDIUM-HIGH)
|
||
|
|
|
||
|
|
- `client-use-swr` - Use SWR/TanStack Query for client-side data
|
||
|
|
- `client-no-effect-fetch` - Avoid fetching in useEffect without caching libraries
|
||
|
|
- `client-prefetch-link` - Use next/link prefetching
|
||
|
|
- `client-caching-headers` - Respect cache-control headers
|
||
|
|
|
||
|
|
### 5. Re-render Optimization (MEDIUM)
|
||
|
|
|
||
|
|
- `rerender-memo-props` - Memoize complex props
|
||
|
|
- `rerender-dependencies` - Use primitive dependencies in effects
|
||
|
|
- `rerender-functional-setstate` - Use functional setState for stable callbacks
|
||
|
|
- `rerender-context-split` - Split context to avoid wide re-renders
|
||
|
|
|
||
|
|
### 6. Rendering Performance (MEDIUM)
|
||
|
|
|
||
|
|
- `rendering-image-priority` - Priority load LCP images
|
||
|
|
- `rendering-list-virtualization` - Virtualize long lists
|
||
|
|
- `rendering-content-visibility` - Use content-visibility for long lists
|
||
|
|
- `rendering-hoist-jsx` - Extract static JSX outside components
|
||
|
|
- `rendering-hydration-no-flicker` - Use inline script for client-only data
|
||
|
|
|
||
|
|
### 7. JavaScript Performance (LOW-MEDIUM)
|
||
|
|
|
||
|
|
- `js-batch-dom-css` - Group CSS changes
|
||
|
|
- `js-index-maps` - Build Map for repeated lookups
|
||
|
|
- `js-combine-iterations` - Combine multiple filter/map into one loop
|
||
|
|
- `js-set-map-lookups` - Use Set/Map for O(1) lookups
|
||
|
|
|
||
|
|
### 8. Advanced Patterns (LOW)
|
||
|
|
|
||
|
|
- `advanced-event-handler-refs` - Store event handlers in refs
|
||
|
|
- `advanced-init-once` - Initialize app once per app load
|