Skip to content

Dynamic component not re-rendered properly when it was the initial render with PPR enabled (only with npm build)Β #76263

Open
@belmeopmenieuwesim

Description

πŸ”— Link to Minimal Reproduction

Codesandbox: Next.js PPR Dynamic Component Issue
Note: Ensure the "prod" task is active when testing.


βœ… Steps to Reproduce

  1. Open the Codesandbox link, ensure the "prod" task is running, and open the preview.
  2. Refresh the preview while on the / route.
    • Expected: The Suspense fallback appears initially, and the dynamic component is streamed in correctly.
  3. Click on the "About us" link to navigate away.
  4. 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.
  5. 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.

πŸ”„ 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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Assignees

No one assigned

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions