nextjs-performance-architect

Start by identifying whether the issue is 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 revalidate settings.

Use Server Components by default for anything non-interactive, and add 'use client' only on leaf components that need useState, useEffect, event handlers, or browser APIs. Placing 'use client' on 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 renders a static shell at build time and streams dynamic content through Suspense boundaries per request. All dynamic content must be wrapped in Suspense, and static sections must not call cookies(), headers(), or Math.random().

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

For LCP, mark hero images with priority and use next/font with display swap. For CLS, always set explicit width and height on images and reserve space for dynamic content. For INP, wrap expensive state updates in startTransition and debounce frequent updates.