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.

Sign up for GitHub

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

Jump to bottom

Next.js v15 PPR throw error when navigating client side (e.g: a link), with both static and dynamic components with static params route (only in dev) #66241

Closed
theoludwig opened this issue May 27, 2024 · 1 comment · Fixed by #66249
Closed

Next.js v15 PPR throw error when navigating client side (e.g: a link), with both static and dynamic components with static params route (only in dev) #66241

theoludwig opened this issue May 27, 2024 · 1 comment · Fixed by #66249
Labels
bug Issue was opened via the bug report template. locked Navigation Related to Next.js linking (e.g., <Link>) and navigation. Partial Prerendering (PPR) Related to Partial Prerendering.

Comments

@theoludwig
Copy link
Contributor

Link to the code that reproduces this issue

https://github.com/theoludwig/nextjs-bug-ppr-static-and-dynamic

To Reproduce

  1. Start the application in development (next dev)
  2. Go to http://localhost:3000/en (as you can see there is a static rendering section and a dynamic rendering section)
  3. Navigate to another page, for example by clicking on "About (en)"
  4. Navigate again to the home page, for example by clicking on "Home (en)"

Minimal code reproducing the bug

app/[locale]/layout.tsx

const LOCALES = ['en', 'fr'] as const
export const generateStaticParams = () => LOCALES.map((locale) => ({ locale }))
const LocaleLayout = ({ children, params }) => {
  return (
    <html lang={params.locale}>
      <body>{children}</body>
    </html>
  )
}

app/[locale]/page.tsx

const HomePage = (props) => {
  return (
    <main>
      <section>
        <h2>Static Rendering</h2>
        <PostByIdData id={1} />
      </section>

      <section>
        <h2>Dynamic Rendering</h2>
        <Suspense fallback={<PostLoadingUI />}>
          <PostRandomData />
        </Suspense>
      </section>
    </main>
  )
}
export default HomePage

components/PostByIdData.tsx (static)

export const PostByIdData = async (props) => {
  const { id } = props
  const post = await getPostById({ id })
  return <PostUI post={post} />
}

components/PostRandomData.tsx (dynamic)

export const PostRandomData = async () => {
  noStore()
  const randomPostId = getRandomNumber(1, 100)
  return <PostByIdData id={randomPostId} />
}

Current vs. Expected behavior

Current

Error: Dynamic server usage: Route /en couldn't be rendered statically because it used unstable_noStore(). 
See more info here: https://nextjs.org/docs/messages/dynamic-server-error

Expected

No error thrown, as PPR should allow to have both static and dynamic components inside generated static params route (the error is only thrown in development mode not in production build).

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP PREEMPT_DYNAMIC Sun, 26 May 2024 01:30:29 +0000
  Available memory (MB): 15739
  Available CPU cores: 8
Binaries:
  Node: 22.2.0
  npm: 10.8.0
  Yarn: N/A
  pnpm: 9.1.2
Relevant Packages:
  next: 14.3.0-canary.84 // Latest available version is detected (14.3.0-canary.84).
  eslint-config-next: 14.3.0-canary.84
  react: 19.0.0-rc-f994737d14-20240522
  react-dom: 19.0.0-rc-f994737d14-20240522
  typescript: 5.4.5
Next.js Config:

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    ppr: true,
  },
}

export default nextConfig

Which area(s) are affected? (Select all that apply)

Navigation, Partial Prerendering (PPR)

Which stage(s) are affected? (Select all that apply)

next dev (local)

Additional context

The bug wasn't there in Next.js v14.2.3, only in Next.js v15 RC, in dev mode (both with and without turbopack).
@theoludwig theoludwig added the bug Issue was opened via the bug report template. label May 27, 2024
@github-actions github-actions bot added Navigation Related to Next.js linking (e.g., <Link>) and navigation. Partial Prerendering (PPR) Related to Partial Prerendering. labels May 27, 2024
@wyattjoh wyattjoh mentioned this issue May 27, 2024
Merged
wyattjoh added a commit that referenced this issue May 28, 2024
@wyattjoh
[ppr] Don't mark RSC requests as /_next/data requests (#66249)
b5d911c 
Old logic from the pages router was previously being hit during
development. This was more apparent when PPR was enabled as it was
mixing dynamic + static rendering in development which propagated to
errors. This change ensures that requests that are made with `RSC: 1`
are not marked as `/_next/data` URL's, and don't use the same logic
paths.

Previously it was a bit confusing because we used the variable
`isDataReq` in a few places that made it hard to tell what it was
referring to. In this case, the `isDataReq` is actually only used by the
pages router. This renames the `isDataReq` to `isNextDataRequest` to
make it clearer, as well as refactors to ensure that it's not used in
the paths for app routes.

Also to better represent the rendering modes the `supportsDynamicHTML`
variable was renamed to `supportsDynamicResponse`.

Fixes #66241
@github-actions GitHub Actions
Copy link
Contributor

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Jun 12, 2024
wyattjoh added a commit that referenced this issue Sep 13, 2024
@wyattjoh
[ppr] Don't mark RSC requests as /_next/data requests (#66249)
63baca2 
Old logic from the pages router was previously being hit during
development. This was more apparent when PPR was enabled as it was
mixing dynamic + static rendering in development which propagated to
errors. This change ensures that requests that are made with `RSC: 1`
are not marked as `/_next/data` URL's, and don't use the same logic
paths.

Previously it was a bit confusing because we used the variable
`isDataReq` in a few places that made it hard to tell what it was
referring to. In this case, the `isDataReq` is actually only used by the
pages router. This renames the `isDataReq` to `isNextDataRequest` to
make it clearer, as well as refactors to ensure that it's not used in
the paths for app routes.

Also to better represent the rendering modes the `supportsDynamicHTML`
variable was renamed to `supportsDynamicResponse`.

Fixes #66241
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
bug Issue was opened via the bug report template. locked Navigation Related to Next.js linking (e.g., <Link>) and navigation. Partial Prerendering (PPR) Related to Partial Prerendering.
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

[ppr] Don't mark RSC requests as /_next/data requests vercel/next.js
1 participant
@theoludwig