Description
π Link to Minimal Reproduction
Codesandbox: Next.js PPR Dynamic Component Issue
Note: Ensure the "prod"
task is active when testing.
β Steps to Reproduce
- Open the Codesandbox link, ensure the
"prod"
task is running, and open the preview. - Refresh the preview while on the
/
route.- Expected: The Suspense fallback appears initially, and the dynamic component is streamed in correctly.
- Click on the "About us" link to navigate away.
- Click on the "Home" link to navigate back to
/
.- Issue: The Suspense fallback no longer appears, and the dynamic component does not re-render.
- Instead, it seems to be served from the Route Cache, which should not happen.
- Try the same steps but start with
/about
as the initial route:- When you navigate back and forth to
/
, the PPR dynamic component renders correctly as expected.
- When you navigate back and forth to
π Current vs. Expected Behavior
Current Behavior
- When the initial route is
/
, the PPR dynamic component does not re-render when navigating back and forth. - If another route (e.g.,
/about
) is used as the initial route, then the dynamic component behaves correctly. - This suggests that the Route Cache in production builds is affecting the behavior.
Expected Behavior
- The PPR dynamic component should always re-render when navigating back and forth.
- The initial route should not affect whether the component re-renders.
π Environment Information
- Next.js Version:
15.2.0-canary.66
- Reproducible in Production Build? β Yes
- Reproducible in Development Mode? β No (
npm run dev
works fine)
π― Affected Areas
β Partial Prerendering (PPR)
π§ Affected Stages
β
next build
(local production build)
βΉοΈ Additional Context
- This issue only occurs in production builds (
npm run build && npm start
). - In development mode (
npm run dev
), the issue does not occur.
UPDATE (dirty fix):
When using the experimental staleTimes
feature I am able to "fix" the caching issue as explained above (https://nextjs.org/docs/app/api-reference/config/next-config-js/staleTimes).
First, all the <Link>
usages should use either prefetch={true}
or prefetch={false}
, setting it to null
does NOT work, then the caching bug still occurs!
Adding this to my next.config.ts
is a good temporary workaround for me:
import type { NextConfig } from "next";
const nextConfig: NextConfig = {
experimental: {
ppr: 'incremental' ,
staleTimes: {
dynamic: 0, // <- add this
static: 0, // <- and add this
},
}
};
export default nextConfig;
^ The above solution, where using <Link>
with prefetch set to either true
or false
, together with staleTimes set to 0, it disables the functionality of PPR in its entirety. So the above fix is not a real fix, it just makes it default to full page dynamic rendering.. π
Activity