vercel-react-best-practices

Eliminate React and Next.js waterfalls by applying Vercel best practices for parallel data fetching, proper server component boundaries, and optimized client-side fetching patterns to prevent sequential requests.

Optimize Next.js bundle size by applying code splitting, enforcing server-side rendering boundaries, and removing unused JavaScript to reduce client payload and improve loading performance.

Set safe SSR and CSR boundaries in React by correctly identifying server and client components, ensuring data fetching executes server-side while interactivity remains strictly client-side.

You can securely use Next.js server actions during refactoring by applying specific reliability guardrails and security patterns that protect data mutations and prevent unauthorized client-side execution.

Optimize React component re-renders during refactoring by applying JavaScript performance patterns, identifying unnecessary state updates, and structuring components to minimize client-side rendering bottlenecks.

This approach works for reviewing existing React codebases by applying 69 consolidated Vercel performance rules to audit waterfalls, bundle size, rendering logic, and data fetching patterns.