vercel-react-best-practices

To optimize React and Next.js performance, apply structured rules across categories like eliminating data waterfalls, reducing bundle size, and using React Server Components. This skill provides concrete examples and guardrails for automated refactoring and code reviews.

The best way to avoid data fetching waterfalls in Next.js is to parallelize requests and leverage Server Components for optimal data loading. This skill outlines specific patterns to restructure data fetching and improve server-side performance.

Use Suspense and Server Actions in React to handle asynchronous rendering and mutate data directly from the client. This skill provides guidance on implementing these advanced patterns to streamline data fetching and reduce client-side JavaScript.

Yes, this provides migration guidance for adopting React Server Components. It includes frontmatter-driven metadata, guardrails, and concrete examples to support integration, testing, and automation when transitioning your Next.js application architecture.

Reduce bundle size and re-renders by applying targeted optimization rules for client-side data fetching and rendering performance. This skill identifies specific code patterns to minimize JavaScript payloads and prevent unnecessary component re-renders.