vercel-react-best-practices

Optimize React and Next.js performance by applying parallelization for data fetching, using dynamic imports to shrink bundle size, and minimizing RSC serialization to improve UI responsiveness and page load times.

Eliminate Next.js data fetching waterfalls by applying parallelization and streaming-friendly patterns to data loading paths, which speeds up asynchronous work and prevents sequential request blocking in server components.

Reduce unnecessary React re-renders by correctly managing state and derived data, leveraging transition patterns to defer expensive updates, and avoiding shared request state that triggers cascading component renders.

Reduce Next.js bundle size by avoiding expensive barrel imports, deferring non-critical third-party code, and using dynamic imports and preloading strategies to achieve better Time to Interactive and Largest Contentful Paint.

Minimize React Server Component serialization payloads during SSR by reducing the size of data passed between server and client boundaries, avoiding shared request state, and optimizing the structure of rendered output.

Yes, you can use this rule-driven guidance within agent-led workflows to review code for performance improvements, automatically identifying refactoring opportunities for bundle-size work and render inefficiencies.