Skip to content

Dynamic Component is rendered statically when loading.tsx is present beside the layout #58686

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

Open
1 task done
imbhargav5 opened this issue Nov 20, 2023 · 1 comment
Open
1 task done
Labels
bug Issue was opened via the bug report template. Pages Router Related to Pages Router. stale The issue has not seen recent activity.

Comments

@imbhargav5
Copy link
Contributor

Link to the code that reproduces this issue

https://github.com/imbhargav5/nextjs-loading-error-reproduction

To Reproduce

  1. Clone the repository
  2. Build it with yarn build

Current vs. Expected behavior

I put a fake wait promise within a dynamic layout. (See /src/app/dynamic/layout.tsx). And I put a loading.tsx file to stream render the response.

import { ReactNode } from "react";

export const dynamic = 'force-dynamic';
export const revalidate = 0;

const fakeWait = (ms: number) => {
    console.log('This should never run statically');
    return new Promise(resolve => setTimeout(resolve, ms))
};

export default async function Layout({children}: {
    children: ReactNode
}){
    // This should only be run dynamically as this layout is dynamic
    await fakeWait(1000);
    return <>{children}</>
}

Current behaviour

When this project is built, this is the odd behaviour.
With loading.tsx present beside the layout.tsx with force-dynamic behaviour present, this fakeWait function is being called during the build step.
Without loading.tsx present, it doesn't get called.

Expected behaviour

Irrespective of loading.tsx being present or not, fakeWait function should never be called as this layout is not static and it should not be built statically.

Verify canary release

  • I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.1.0: Mon Oct  9 21:27:24 PDT 2023; root:xnu-10002.41.9~6/RELEASE_ARM64_T6000
Binaries:
  Node: 20.4.0
  npm: 9.7.2
  Yarn: 1.22.18
  pnpm: N/A
Relevant Packages:
  next: 14.0.4-canary.5
  eslint-config-next: 14.0.3
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.2.2
Next.js Config:
  output: N/A

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

App Router, Data fetching (gS(S)P, getInitialProps)

Additional context

Xnapper-2023-11-20-20 16 22
Xnapper-2023-11-20-20 17 41

@imbhargav5 imbhargav5 added the bug Issue was opened via the bug report template. label Nov 20, 2023
@github-actions github-actions bot added the Pages Router Related to Pages Router. label Nov 20, 2023
@nextjs-bot
Copy link
Collaborator

This issue has been automatically marked as stale due to two years of inactivity. It will be closed in 7 days unless there’s further input. If you believe this issue is still relevant, please leave a comment or provide updated details. Thank you.

@nextjs-bot nextjs-bot added the stale The issue has not seen recent activity. label May 18, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Issue was opened via the bug report template. Pages Router Related to Pages Router. stale The issue has not seen recent activity.
Projects
None yet
Development

No branches or pull requests

2 participants