vercel-react-best-practices

To optimize React and Next.js performance, apply Vercel engineering guidelines for component design, server/client data fetching, and bundle size reduction to accelerate rendering and minimize runtime costs.

Best practices for Next.js data fetching involve using server components for initial loads, applying Suspense for streaming, and choosing client patterns only when necessary to reduce bundle costs and improve load times.

Reduce React bundle size by applying dynamic imports, enforcing strict component design guidelines, and auditing your project against Vercel performance playbooks to identify and eliminate heavy dependencies.

Use React server components for static UI and direct data fetching to reduce client bundle size, reserving client components for interactive elements to minimize runtime costs and improve initial load times.

Yes, these Next.js optimization guidelines trigger during code refactoring, allowing you to audit existing projects, identify performance hotspots, and implement recommended patterns for server/client components and data fetching.