vercel-react-best-practices

Optimize React and Next.js performance by applying priority-based rules across server-side rendering, SSR/CSR boundaries, and per-request server patterns. This prevents server-side waterfalls and reduces render latency.

Eliminate data fetching waterfalls by deferring awaits and parallelizing independent fetches using Promise.all. This approach prevents sequential blocking and improves server-side rendering performance.

Reduce bundle size by leveraging dynamic imports and preloading techniques. These patterns split JavaScript payloads strategically, minimizing client-side download overhead and rendering delays.

Use Suspense boundaries to strategically isolate loading states within React components. This prevents entire page blocking and optimizes client-side rendering performance during data fetching.

Apply these performance patterns directly to Next.js API routes and Server Actions. The guide provides actionable techniques for safe refactoring and scalable improvements across these specific ecosystems.

Prevent unnecessary re-renders by applying targeted optimization techniques within the rendering performance category. This reduces client-side compute overhead and improves overall application responsiveness.