React Next Performance Optimization

Core Workflow

1. Identify framework version, router mode, rendering strategy, deployment target, slow user flow, and target metric.
2. Measure before changing: build output, bundle analyzer, browser performance traces, React Profiler, Lighthouse/Web Vitals, server logs, or user-reported reproduction.
3. Classify bottlenecks by layer: network, server/rendering, data fetching/cache, JavaScript bundle, hydration, re-rendering, layout/paint, images/fonts/scripts, third-party code, or backend.
4. Fix highest-impact verified issues first. Avoid speculative memoization and broad rewrites.
5. Re-measure after each meaningful change and record the before/after evidence.
6. Leave a prevention note: what pattern caused the issue, how to avoid it, and what metric/test should catch recurrence.

Optimization Priorities

• Next.js: prefer Server Components by default, keep "use client" boundaries narrow, use framework image/font/script/lazy-loading tools, and understand caching/revalidation before changing data flow.
• React: reduce unnecessary state lifting, unstable props, expensive renders, effect loops, and avoidable context churn; use memo, useMemo, and useCallback only when they solve a measured problem or preserve stable references intentionally.
• Bundles: inspect large dependencies, duplicate packages, client-only imports, heavy charts/editors/maps, and dynamic imports.
• Runtime: inspect long tasks, hydration cost, layout shifts, input delay, memory churn, and repeated network work.
• Core Web Vitals: optimize LCP, INP, and CLS with user-flow evidence, not only lab scores.