vercel-react-best-practices

To optimize React and Next.js performance, you must parallelize data fetching to eliminate waterfalls. This prevents sequential network requests from blocking rendering, ensuring server-side and client-side data load concurrently for faster page loads.

The best way to reduce Next.js bundle size is applying structured optimization rules to minimize initial JavaScript payloads. This involves code splitting and careful component management to ensure faster load times and improved code quality.

To stop unnecessary React component re-renders, apply correct memoization techniques guided by structured refactoring rules. This optimizes JavaScript performance by preventing wasted render cycles when component inputs remain unchanged.

Yes, you can use these optimization rules to refactor existing code automatically. The guidelines are structured to direct AI agents and LLMs in automated code generation and performance refactoring for React and Next.js applications.

Yes, this Skill covers both server-side and client-side rendering optimization. It provides specific rules for data fetching and rendering strategies across both environments to ensure comprehensive React and Next.js performance improvements.