What is Partial Prerendering (PPR) in Next.js? | Interview Question

Q: What is Partial Prerendering (PPR) in Next.js?

**Target Audience:** Frontend engineers preparing for Next.js interviews — assumes basic React and App Router familiarity. **Difficulty:** Hard > **How to read this doc:** Each idea is explained in plain language first, then tagged with `📌 Interview term:`. Every behaviour claim was checked against the Next.js docs shipped with the package (written on 16.3.4, re-reviewed against 16.4.2) and, in the **Verified** section, against real output from a build or a running server; each Verified block names the version it ran on. ## 1. Why This Even Matters — A Story First Think of a newspaper printed overnight with a blank box on the front page. At the newsstand, the vendor hands you the paper immediately and then fills in today's weather in the box while you are already reading the headlines. Before PPR, one blank box meant the whole paper was printed only when you asked for it. With PPR, the paper is ready and only the box waits. ## 2. The Core Idea 📌 **Interview term: Partial Prerend

The problem

Question presented to candidate: "Our product page is static except for the cart count and a personal greeting, so the whole route renders per request. How would Partial Prerendering change that, and how do you turn it on in Next.js 16?"

What a strong answer should cover:

PPR prerenders a static shell of a route at build time and leaves holes for request-time content, marked by Suspense boundaries.
At request time the shell and the fallbacks are sent immediately, and the dynamic parts stream into the same response.
In Next.js 16 it is part of Cache Components: enable cacheComponents: true (since 16.4 together with partialPrefetching, which new create-next-app projects already set); the old experimental.ppr flag now fails the build.
Request-time APIs such as cookies() must sit inside Suspense (or be cached with 'use cache'), otherwise the build reports blocking data.
Route segment config like dynamic and revalidate is not compatible with cacheComponents.

Clarifying questions expected:

"Which parts are personalised or need request data?" — those become Suspense holes.
"Are you on Next.js 16?" — the configuration differs from the 15 canary.

Code / implementation expected: Yes — the config flag and a page with one dynamic hole.

nextjs
ppr
rendering
performance

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Frontend engineers preparing for Next.js interviews — assumes basic React and App Router familiarity. Difficulty: Hard

How to read this doc: Each idea is explained in plain language first, then tagged with 📌 Interview term:. Every behaviour claim was checked against the Next.js docs shipped with the package (written on 16.3.4, re-reviewed against 16.4.2) and, in the Verified section, against real output from a build or a running server; each Verified block names the version it ran on.

1. Why This Even Matters — A Story First

Think of a newspaper printed overnight with a blank box on the front page. At the newsstand, the vendor hands you the paper immediately and then fills in today's weather in the box while you are already reading the headlines. Before PPR, one blank box meant the whole paper was printed only when you asked for it. With PPR, t

The solution is hidden so you can try first

8 min read · 8 sections

Read the code

Enabling PPR and a page with one dynamic hole

// next.config.ts
import type { NextConfig } from "next";
const nextConfig: NextConfig = { cacheComponents: true, partialPrefetching: true }; // both are set by create-next-app since 16.4
export default nextConfig;

// app/product/page.tsx
import { Suspense } from "react";
import { cookies } from "next/headers";

async function Greeting() {
  const user = (await cookies()).get("user")?.value ?? "guest";
  return <p>Welcome back, {user}</p>;
}

export default function ProductPage() {
  return (
    <main>
      <h1>Trail Runner 2</h1>                         {/* part of the static shell */}
      <Suspense fallback={<p>Loading your greeting...</p>}>
        <Greeting />                                   {/* rendered per request */}
      </Suspense>
    </main>
  );
}

Discussion

Other approaches, follow-ups and how it went in real interviews.

Sign in to join the discussion.

No comments yet. Share how you would answer it.

The solution is hidden so you can try first

Keep your momentum going.