vercel-react-best-practices

To optimize React and Next.js performance and avoid data fetching waterfalls, you should implement parallel data fetching and use React cache. This skill analyzes your codebase to detect sequential fetches and generates concrete refactoring tasks to parallelize them.

The best way to reduce bundle size in a Next.js project is to enforce atomic server and client component optimizations. This skill scans your codebase to identify heavy dependencies and generates precise code-change instructions to minimize your final bundle footprint.

Using Suspense and useTransition for server actions in Next.js improves loading states and TTI. This skill provides structured guidance on implementing these patterns correctly within your client and server contexts to ensure SSR and CSR efficiency.

Yes, you can use this AI guide to refactor client and server components for better TTI and LCP. It performs automated pattern enforcement to generate a prioritized list of cross-context performance improvements ready for your team to apply.

Yes, this approach works for both client-side data fetching and server actions. It provides cross-context guidance covering SSR and CSR efficiency, ensuring consistent performance patterns across your entire React and Next.js application architecture.

You should avoid using React cache for data fetching optimizations when it causes unnecessary re-renders or conflicts with dynamic data requirements. This skill reviews your component logic to identify when caching patterns degrade performance and recommends appropriate alternatives.