vercel-react-best-practices

To optimize React and Next.js performance during a refactor, apply established rule-based patterns targeting waterfalls, bundle size, and rendering efficiency. This approach validates changes against measurable performance targets to ensure safe, non-disruptive improvements.

Best practices for reducing bundle size in Next.js involve applying specific code patterns for components and pages that optimize across client and server. This includes avoiding unnecessary data fetches and implementing JavaScript micro-optimizations to decrease the final bundle footprint.

Server-client boundary optimization improves Time To Interactive by applying targeted data fetching patterns across server and client. This prevents waterfall requests and avoids unnecessary client-side data fetches, directly enhancing overall user experience.

Yes, you can use automated code review patterns to fix React re-render performance issues. The skill guides automated code generation and refactoring tasks by enforcing rules for re-render optimization and rendering performance improvements.

When applying React performance patterns to existing components, avoid disruptive changes that bypass performance validation. The process enforces safe modifications, ensuring refactoring tasks do not break existing application logic while hitting performance targets.