vercel-react-best-practices

React and Next.js performance best practices span eight categories: eliminating waterfalls, bundle size optimization, server-side performance, client-side data fetching, re-render optimization, rendering performance, JavaScript performance, and advanced patterns. This Skill consolidates proven patterns to systematically improve speed and stability.

To structure Server Components and Server Actions boundaries in Next.js, apply concrete guardrails for safe serialization, error handling, and security considerations. This Skill provides actionable requirements for managing RSC boundaries and client interactions across development and production.

Eliminating data fetching waterfalls in Next.js requires applying specific performance patterns for both server-side and client-side data fetching. This Skill encodes guardrails and concrete examples to help teams progressively implement these optimizations during refactoring.

You can use this Skill to review and refactor existing React codebases by applying its eight-category performance patterns. It supports automated checks and consistent decision-making during development and code reviews to improve maintainability.

Limitations of applying React server-side performance guardrails include managing the complexities of RSC boundaries, ensuring safe serialization, and handling security considerations for Server Actions. This Skill provides specific guardrails to navigate these edge cases.