Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
belmeopmenieuwesim opened this issue Feb 20, 2025 · 0 comments
Labels
Partial Prerendering (PPR) Related to Partial Prerendering.

Comments

@belmeopmenieuwesim
Copy link

belmeopmenieuwesim commented Feb 20, 2025

πŸ”— 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;

UPDATE 2:

Nevermind. When using <Link> with prefetch set to either true or false 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.. 😟

@github-actions github-actions bot added the Partial Prerendering (PPR) Related to Partial Prerendering. label Feb 20, 2025
@belmeopmenieuwesim belmeopmenieuwesim changed the title Dynamic component not re-rendered properly when it was the initial render with PPR enabled (only on prod build) Dynamic component not re-rendered properly when it was the initial render with PPR enabled (only with npm build) Feb 20, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Partial Prerendering (PPR) Related to Partial Prerendering.
Projects
None yet
Development

No branches or pull requests

1 participant