nextjs-performance-architect

Start by identifying the main complaint: slow LCP, large bundle, slow API response, or stale data. Then audit for anti-patterns like 'use client' at the layout root, sequential await fetches, and missing cache directives, and apply parallel fetching with explicit cache strategies.

Use Server Components by default for anything non-interactive. Add 'use client' only at leaf components that need useState, useEffect, event handlers, or browser APIs, since placing it at a layout or page root strips RSC benefits from the entire subtree.

Next.js has four cache layers: request memoization, Data Cache, Full Route Cache, and Router Cache. Since Next.js 15, fetch defaults to no-store, so you must explicitly set cache: 'force-cache' or next: { revalidate: N } to get caching behavior.

Yes. PPR prerenders a static shell at build time and streams dynamic content through Suspense boundaries per request. Dynamic holes must be wrapped in Suspense, and static parts must not call cookies(), headers(), or Math.random().

Common causes are client components importing heavy libraries, barrel imports like import * from icon packs, and date libraries such as moment. Run ANALYZE=true with @next/bundle-analyzer, use named imports, and move non-interactive logic to Server Components.

Target LCP under 2.5 seconds, CLS under 0.1, and INP under 200ms. Use next/image with priority on the LCP image, explicit width and height to prevent layout shift, and startTransition to keep heavy updates off the interaction path.