Skip to content

Preload issue for layout with client tabs (consuming usePathname) and server component children #58419

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
Open
1 task done
kevinschaich opened this issue Nov 14, 2023 · 4 comments
Open
1 task done

Preload issue for layout with client tabs (consuming usePathname) and server component children #58419

kevinschaich opened this issue Nov 14, 2023 · 4 comments
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

@kevinschaich
Copy link

kevinschaich commented Nov 14, 2023 •
edited
Loading

Link to the code that reproduces this issue

https://github.com/kevinschaich/ssr-render-bug

To Reproduce

  1. Start dev server
  2. Refresh localhost
  3. Click between tabs

Current vs. Expected behavior

Clicking the tab with Next's Link component should redirect to a new server component within the same layout

Kapture.2023-11-14.at.01.57.38.mp4

In the client console, sometimes I get the following warning:

The resource http://localhost:3000/_next/static/css/app/(app)/(nav)/layout.css?v=1699945050429 was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.

When deployed to Vercel in production, I get the following error:

Failed to load resource: the server responded with a status of 404 ()
https://topografik.co/bacinger/f1-circuits/edit?_rsc=dokr6

^ I think it's trying to stream the contents of one of the server component children in the layout.

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.0.0: Fri Sep 15 14:41:43 PDT 2023; root:xnu-10002.1.13~1/RELEASE_ARM64_T6000
Binaries:
  Node: 20.3.1
  npm: 9.6.7
  Yarn: 1.22.19
  pnpm: 8.8.0
Relevant Packages:
  next: 13.5.6
  eslint-config-next: 13.5.4
  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)

Routing (next/router, next/navigation, next/link)

Additional context

I tested this bug against the next@latest, next@canary, and next@13.5.6 and they're all the same issue for me. Note the info block above is just from the most recent test (13.5.6).

I cannot share the entire source code for my project but I shared a minimal example with the same structure. I'm able to reproduce the error in the minimal repo less often but they both share the same structure.
@kevinschaich kevinschaich added the bug Issue was opened via the bug report template. label Nov 14, 2023
@github-actions github-actions bot added the Linking and Navigating Related to Next.js linking (e.g., <Link>) and navigation. label Nov 14, 2023
@Antonio112009
Copy link

image

Maybe it's unrelated to this bug, but I started seeing that "?_rsc=...." appears somehow in Google Search Console. How to get rid of it?

@kevinschaich
Copy link
Author

re: my issue – I think it was a subcomponent blocking the render thread. commenting all the children out makes things all good 🤷🏼‍♂️

@Antonio112009 I think it's fetching/streaming your server components (rsc = React Server Component). dunno why it's in the search console though, maybe a common chunk for a child component that gets served to your users?

@Antonio112009
Copy link

re: my issue – I think it was a subcomponent blocking the render thread. commenting all the children out makes things all good 🤷🏼‍♂️

@Antonio112009 I think it's fetching/streaming your server components (rsc = React Server Component). dunno why it's in the search console though, maybe a common chunk for a child component that gets served to your users?

Thank you for sharing your thoughts. I still cannot find an explanation for this issue. I will create a dedicate question on this topic.

@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 13, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
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
Milestone
No milestone
Development

No branches or pull requests
3 participants
@kevinschaich @Antonio112009 @nextjs-bot