vercel-react-best-practices

Optimize React and Next.js performance by applying 57 rules across 8 categories covering dynamic imports, code-splitting, and bundle-size optimizations. This skill guides refactoring components to enforce correctness, safety, and maintainability guardrails improving metrics like TTI and LCP.

Prevent data fetching waterfalls in Next.js by applying proven patterns like async deferral and parallel data fetching. This skill enforces category-specific guidelines to optimize data fetching strategies from server-side rendering to client rendering.

Use Suspense boundaries for code-splitting by applying this skill's patterns for dynamic imports and suspense integration. It provides guardrails for writing and refactoring components, ensuring safe and maintainable rendering optimizations.

This skill helps with writing, reviewing, and refactoring existing React/Next.js components and pages. It consolidates Vercel's performance guidelines to accelerate refactoring and prevent performance regressions across your codebase.

You should avoid client-side rendering when server-side rendering or static generation better suits your data fetching needs. This skill enforces 8 category-specific patterns to guide rendering choices, checking for correctness, safety, and maintainability.

React apps suffer performance regressions due to waterfalls, large bundles, and suboptimal data fetching. This skill applies Vercel's performance guidelines to identify critical patterns like per-request caching and suspense boundaries to prevent regressions.