Q56: How does the Prerender Indicator and PPR Build Tree analysis detect dynamic leaks?

During next build, Next.js parses the AST of every component tree to build an internal Prerender Manifest. It flags components calling dynamic functions (cookies(), headers(), searchParams) or uncached fetch calls. If dynamic calls execute outside an explicit <Suspense> boundary during PPR builds, Next.js throws build warnings or forces the entire route path into dynamic SSR.

Isolating Dynamic Leaks using Suspense

// app/dashboard/page.js
import { Suspense } from 'react';
import DynamicCart from './DynamicCart'; // Calls cookies()

export default function Page() {
  return (
    <div>
      <h1>Static Shell Header</h1> {/* Preserved as SSG */}
      <Suspense fallback={<p>Loading cart...</p>}>
        <DynamicCart /> {/* Isolated dynamic leak */}
      </Suspense>
    </div>
  );
}

💡 Wrapping DynamicCart in Suspense isolates the dynamic cookie check, keeping Page's outer HTML shell statically pre-rendered.

Key Takeaways

Build engine constructs an AST manifest identifying static vs dynamic rendering branches.
Dynamic calls outside Suspense boundaries force whole route subtrees into dynamic rendering mode.

Knowledge Check

What is the consequence of calling headers() inside a top-level layout component without Suspense wrappers?

Q56: How does the Prerender Indicator and PPR Build Tree analysis detect dynamic leaks?

STAY UPDATED WITH BYTES!