vercel-react-best-practices

React and Next.js performance best practices involve applying prioritized rules across categories like bundle size optimization, server-side performance, and re-render optimization to improve speed and maintainability. This skill provides a catalog of actionable patterns with concrete examples and guardrails to prevent regressions during development and refactoring.

To eliminate data fetching waterfalls in Next.js, apply structured patterns for client-side data fetching and server actions that prioritize parallel fetching. This skill provides concrete examples and guardrails to prevent regressions, ensuring your data fetching logic remains maintainable while improving load times.

Yes, this skill covers bundle size optimization for Next.js by providing prioritized rules and actionable patterns. It includes concrete examples and guardrails to help teams reduce bundle size and prevent regressions during code review and refactoring.

To optimize React component re-renders, apply the re-render optimization patterns provided by this skill. It offers a catalog of proven rules with guardrails and examples to prevent regressions while improving rendering performance across your project.

Yes, you can use these patterns for both new components and refactoring existing pages. The skill provides real-world scenarios for new components, pages, data fetching, and server actions, applying guardrails to prevent regressions during development, code review, and refactoring.

The limitations of applying advanced rendering patterns in React involve the risk of introducing regressions if not properly guarded. This skill mitigates that by providing concrete guardrails and examples for advanced patterns, ensuring that performance improvements do not negatively impact code quality or maintainability.