Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Template.tsx not rendering correctly in many different circumstances #56499

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
cjonesdoordash opened this issue Oct 5, 2023 · 3 comments
Open
1 task done
Labels
bug Issue was opened via the bug report template. Linking and Navigating Related to Next.js linking (e.g., <Link>) and navigation. stale The issue has not seen recent activity.

Comments

@cjonesdoordash
Copy link

cjonesdoordash commented Oct 5, 2023

Link to the code that reproduces this issue

https://github.com/cjonesdoordash/nextjs-prefetch-issue/tree/template-issue

To Reproduce

With next/link pre-fetching disabled (default when you pull down the branch)

  1. Run yarn build && yarn start
  2. Navigate to localhost:3000/testing - verify that you have two templates rendered with data from a template server component and state from a template client component (one outer and one inner)
  3. Increment client-side counters to change template state on both counters
  4. Navigate to the next page via the link
  5. Verify that for the outer template neither the server seconds nor the client counter change
  6. Verify for the inner template just the client counter resets

With next/link pre-fetching enabled (just remove the prefetch={false} on both links)

  1. Run yarn build && yarn start
  2. Navigate to localhost:3000/testing - verify that you have two templates rendered with data from a template server component and state from a template client component (one outer and one inner)
  3. Increment client-side counters to change template state on both counters
  4. Navigate to the next page via the link
  5. Verify that for the outer template the client counter doesn't change, but the server seconds sometimes doesn't reflect a proper change in seconds.
  6. Verify for the inner template that both the seconds increment correctly and the client counter resets
  7. Using quick navigations back and forth to trigger the RSC client-side cache verify that the inner template seconds doesn't change once you hit the cache

Current vs. Expected behavior

Expected behavior is that Templates re-mount and render in their entirety (both server and client components) on any route transition if they are within the segment.

Current behavior is that Templates fail to mount / render properly in a bunch of difference scenarios listed about in the reproductions.

Verify canary release

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

Provide environment information

Operating System:
  Platform: darwin
  Arch: x64
  Version: Darwin Kernel Version 22.6.0: Fri Sep 15 13:39:52 PDT 2023; root:xnu-8796.141.3.700.8~1/RELEASE_X86_64
Binaries:
  Node: 16.18.0
  npm: 8.19.2
  Yarn: 1.22.5
  pnpm: 6.23.6
Relevant Packages:
  next: 13.5.4
  eslint-config-next: N/A
  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, Routing (next/router, next/navigation, next/link)

Additional context

No response

@cjonesdoordash cjonesdoordash added the bug Issue was opened via the bug report template. label Oct 5, 2023
@github-actions github-actions bot added the Linking and Navigating Related to Next.js linking (e.g., <Link>) and navigation. label Oct 5, 2023
@cjonesdoordash
Copy link
Author

Also verified with programmatic routing (push from useRouter) instead of using next/link that it behaves the exact same as the above case: With next/link pre-fetching disabled.

@rtabacaru
Copy link

I am having this issue as well

@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 Apr 30, 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. Linking and Navigating Related to Next.js linking (e.g., <Link>) and navigation. stale The issue has not seen recent activity.
Projects
None yet
Development

No branches or pull requests

3 participants