App router: build is not recognising the PPR routes correctly

[kryptonian41]

Question

I have PPR turned on and have set up the /pokemon route to display dynamic content under a Suspense boundary, creating a dynamic hole. Here is my next.config.ts file

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  /* config options here */
  experimental: {
    ppr: true,
    // dynamicIO: true,
  },
};

export default nextConfig;

/app/pokemon/page.tsx

import { RandomPokemonList } from "@/components/RandomPokemonList";
import { WeatherInfo } from "@/components/WeatherInfo";
import { Suspense } from "react";
import { Loading } from "@/components/Loading";

export default function Page() {
  return (
    <div className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">
      <p>Static Content</p>

      <p>Pokemon list with delay</p>
      <Suspense fallback={<Loading />}>
        <RandomPokemonList />
      </Suspense>

      <p>Weather info</p>
      <Suspense fallback={<Loading />}>
        <WeatherInfo />
      </Suspense>
    </div>
  );
}

But after running the build command pnpm build in the build logs, I see that the /pokemon is statically rendered instead of being rendered partially. I followed the setup in this example repo.

> next build

   ▲ Next.js 15.3.0-canary.43
   - Experiments (use with caution):
     ✓ ppr

   Creating an optimized production build ...
 ✓ Compiled successfully in 0ms
 ✓ Linting and checking validity of types    
 ✓ Collecting page data    
 ✓ Generating static pages (6/6)
 ✓ Collecting build traces    
 ✓ Finalizing page optimization    

Route (app)                                 Size  First Load JS    
┌ ○ /                                      144 B         112 kB
├ ○ /_not-found                            144 B         112 kB
└ ○ /pokemon                               144 B         112 kB
+ First Load JS shared by all             111 kB
  ├ chunks/470-5dbdf66bb252fac9.js       46.6 kB
  ├ chunks/750181ff-dd33d3cb6ddd5fd5.js  62.9 kB
  └ other shared chunks (total)          1.89 kB


○  (Static)  prerendered as static content

I also ensured that I am using the latest canary build of Next by checking both the package.json and pnpm-lock.yaml files.

{
  "name": "next-ppr-dynamicio-pokemon",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev --turbopack",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "next": "15.3.0-canary.43",
    "react": "^19.0.0",
    "react-dom": "^19.0.0"
  },
  "devDependencies": {
    "@tailwindcss/postcss": "^4",
    "@types/node": "^20",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "tailwindcss": "^4",
    "typescript": "^5"
  }
}

pnpm-lock.yaml

lockfileVersion: '9.0'

settings:
  autoInstallPeers: true
  excludeLinksFromLockfile: false

importers:

  .:
    dependencies:
      next:
        specifier: 15.3.0-canary.43
        version: 15.3.0-canary.43([email protected]([email protected]))([email protected])
      react:
        specifier: ^19.0.0
        version: 19.1.0
      react-dom:
        specifier: ^19.0.0
        version: 19.1.0([email protected])

What confuses me is that as soon as I enable dynamicIO, the build process correctly recognizes the page to be partially rendered.

> next build

   ▲ Next.js 15.3.0-canary.43
   - Experiments (use with caution):
     ✓ ppr
     ✓ dynamicIO

   Creating an optimized production build ...
 ✓ Compiled successfully in 0ms
 ✓ Linting and checking validity of types    
 ✓ Collecting page data    
 ✓ Generating static pages (6/6)
 ✓ Collecting build traces    
 ✓ Finalizing page optimization    

Route (app)                                 Size  First Load JS    
┌ ○ /                                      144 B         112 kB
├ ○ /_not-found                            144 B         112 kB
└ ◐ /pokemon                               144 B         112 kB
+ First Load JS shared by all             111 kB
  ├ chunks/470-5dbdf66bb252fac9.js       46.6 kB
  ├ chunks/750181ff-dd33d3cb6ddd5fd5.js  62.9 kB
  └ other shared chunks (total)          1.89 kB

Expected Behavior

The build process should correctly identify routes for partial pre-rendering without setting dynamicIO: true

Reproduction

Here is the link to the repo to reproduce the issue: https://github.com/kryptonian41/next-ppr-dynamicio

[icyJoseph]

Did you add this to the page?

export const experimental_ppr = true

[kryptonian41]

That worked, I am guessing that next uses some kind of heuristics to detect dynamic content. But again what confuses me is that why in their example everything works as expected without any workarounds like await connection().

Look at these files from the example:-

1. https://github.com/vercel-labs/next-partial-prerendering/blob/main/app/page.tsx
2. https://github.com/vercel-labs/next-partial-prerendering/blob/main/components/recommended-products.tsx

[kryptonian41]

The only difference between the example and my setup is that I am using Tailwindcss v4 and the example uses v3.

[icyJoseph]

The SingleProduct component uses cookies though, through the Pricing component.

• https://github.com/vercel-labs/next-partial-prerendering/blob/main/app/page.tsx#L13
• https://github.com/vercel-labs/next-partial-prerendering/blob/main/components/single-product.tsx
• https://github.com/vercel-labs/next-partial-prerendering/blob/main/components/pricing.tsx

const cartCount = Number(cookies().get('_cart_count')?.value || '0');

And, their example is using next canary 15.0.x, while you have 15.3.x, but I think that's not the reason, necessarily. It is the cookies usage that makes this page dynamic.

[kryptonian41]

Hmm I see it might be just that. I was playing around more and found that a fetch call with { cache: 'no-store' } is also a valid dynamic API call. So after making that change and removing the await connection() function call, I am able to get the /pokemon route to be built as partially pre-rendered.

Although { cache: 'no-store' } is the default for fetch from Next 15 and above, for PPR to work with a component only has fetch as a dynamic API call it needs to be specified explicitly.

[kryptonian41]

I have hosted the app here: https://next-ppr-dynamicio.vercel.app/pokemon
Here is the code for the pokemon route
app/page/pokemon

import { WeatherInfo } from "@/components/WeatherInfo";
import { Suspense } from "react";
import { Loading } from "@/components/Loading";

export default function Page() {
  return (
    <div className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">
      <p>Static Content</p>
      <PokemonList />

      <p>Pokemon list with delay</p>
      <Suspense fallback={<Loading />}>
        <RandomPokemonList delay={2000} />
      </Suspense>

      <p>Weather info</p>
      <Suspense fallback={<Loading />}>
        <WeatherInfo />
      </Suspense>
    </div>
  );
}

At first it appears to be working perfectly, the static loads super fast with the component redered statically on edge, but after the dynamic parts are streamed in <PokemonList /> components also updates with new values. Which is not what I expected. @icyJoseph any clues why this is happening.

[kryptonian41]

Ah I see React still runs through the code on the client side for hydrating the streamed in content, and since I am using Math.random() to select random list of pokemons from the response received from the fetch call the component updates again with values different from what was statically rendered on the edge.

[kryptonian41]

I think I am finally able to wrap my head around the concepts of PPR. Thanks for your help @icyJoseph.

[kryptonian41]

@leerob and @manovotny can you help in identifying what's the issue here?