vercel-react-best-practices

React performance optimization focuses on reducing Time to Interactive through memoization, code splitting, and lazy loading. Apply patterns like React.memo for expensive components, dynamic imports for routes, and server-side rendering in Next.js to minimize initial bundle size and render time.

Bundle size reduction combines tree-shaking unused code, lazy loading non-critical routes, and splitting large dependencies. Use Next.js built-in optimizations like automatic code splitting, image optimization, and dynamic imports to serve only what's needed on each page.

Next.js data fetching performance depends on render strategy: use getStaticProps for static content cached at build time, getServerSideProps for dynamic server rendering, and client-side fetching sparingly. Server-side fetching reduces client JavaScript and improves Time to Interactive.

Common antipatterns include unnecessary re-renders from missing keys in lists, inline function definitions in props, large components without code splitting, and client-side data fetching that blocks render. Code review guidance identifies these patterns early to prevent performance debt.

Yes, these practices apply directly to refactoring large Next.js apps. Audit existing pages for render strategy mismatches, bundle bloat, and waterfalling data fetches, then incrementally apply optimizations for data fetching, rendering, and bundling across components and routes.