Parallel routes are rendered unnecessarily

[slvstr-dev]

Verify canary release

• [X] 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 22.5.0: Thu Jun  8 22:22:20 PDT 2023; root:xnu-8796.121.3~7/RELEASE_ARM64_T6000
    Binaries:
      Node: 18.16.0
      npm: 9.8.1
      Yarn: 1.22.19
      pnpm: 8.6.10
    Relevant Packages:
      next: 13.4.13-canary.5
      eslint-config-next: 13.4.12
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.1.6
    Next.js Config:
      output: N/A

Which area(s) of Next.js are affected? (leave empty if unsure)

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

Link to the code that reproduces this issue or a replay of the bug

https://github.com/slvstr-dev/test-parallel

To Reproduce

• Install project
• Run project locally
• Check console for logs of both routes

Describe the Bug

In layout.tsx I want to render conditionally render a parallel route, f.e. if a user is logged in or not. Currently it runs code from both routes. Console.log's of both page.tsx in root and page.tsx in @auth are being run.

Expected Behavior

Based on the condition I only expect the console.log from the returned page to run.

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

[veiico]

Same issue here, just wanted to create an issue my self, but will leave this simple stackblitz example instead 😅 https://stackblitz.com/edit/vercel-next-js-y3y9qb?file=app%2Fpage.tsx

[octet-stream]

Same issue, but I have different structure: within /admin route there are @login and @admin folders. On the /admin/@admin/page.tsx page I fetch some user-specific data to display that data on the page. The logic is the same: if user is logged in, then render @admin, otherwise @login. Then if I open /admin in browser, the data for @admin is being fetched no matter if I'm logged in or not.

As a workaround I moved data fetching to admin/layout.tsx and made admin/@admin/page.tsx a client component to be able to access the data via React Context. It works, but it's not ideal.

[chrisgrabinski]

I encountered the same problem in my app, where I used parallel/conditional routes to render the correct template for a given route. While trying to come up with a solution, I started to feel like there was no real reason for me to even use parallel routes in the first place.

I ended up choosing a similar approach to @octet-stream, but without using client components and context. Instead, I simply do some minor fetching in page.tsx and then conditionally render a template component (RSC) which receives a uri prop. This is then used to fetch additional data directly in the template itself.

This solution may not work for everyone, but if you're only using parallel routes because it's the "official" solution for conditional routes from the Next.js docs, then it might be worth considering.

If you need any additional features from parallel routes, then another workaround I found is to add some logic to the page.tsx for your slot that returns null if it shouldn't be used. You should be able to reuse the same logic from your layout.tsx and when using fetch from Next.js, this will not lead to additional requests. 👌

I forked @veiico's great reproduction to showcase what I mean. https://stackblitz.com/edit/vercel-next-js-mdb443?file=app%2Fpage.tsx

[tinleym]

@leerob sorry for the ping, but it would be useful to know if this is a bug or an expected behavior. In some cases this can be harmless, but if a conditional route is used for auth (per the example in the docs: https://nextjs.org/docs/app/building-your-application/routing/parallel-routes#conditional-routes), this can lead to a lot of extra execution (and is probably not a good choice).

[kyeo76]

experiencing the same issue. i'm using next v13.5.4

[elzako]

Still an issue in v14.0.0

[springyboy]

Still and issue in 14.0.1.

[ShakurOo]

Any update ? This powerful feature should be fixed ...

[samcx]

@slvstr-dev Thank you for submitting an issue!

I can confirm this is still an issue with the implementation of Parallel routes. We will let you know when this is !

[Nhollas]

6+ months, damn.

[payamtrack]

Having a similar issue, is there any update or any plan to fix it?

[samcx]

@payamtrack There is a plan to address this! Unfortunately, it is not an easy fix, so the team has been discussing this internally.

[payamtrack]

@samcx That's great, thanks for the update!

[nicnocquee]

@samcx

I'm not sure if I should open another issue, but I encountered similar problem, a.k.a, the excessive rendering of server components in parallel routes, even without conditionally rendering the slots.

How to reproduce the bug:

• Clone demo repo: https://github.com/nicnocquee/nextjs-parallel-route-bug
• Run dev
• Open browser and go to http://localhost:3000/de
• Refresh the page
• Click the About link
• See in the terminal that the server components are all rendered multiple times.

What makes thing worst is that React's cache doesn't work in this case. The function being cached will be called as many times as the components are rendered (see that the console.log output inside the _getData function is called multiple times instead of just once. If the function queries the database, this would use resources unnecessarily.

[samcx]

@nicnocquee Please open a separate issue if it's not the exact issue described in this issue.

[ppiwo]

Any chance the docs could at least be updated to warn users of this unexpected behavior? https://nextjs.org/docs/app/building-your-application/routing/parallel-routes#conditional-routes

[samcx]

@ppiwo Of course! Maybe you can look to create a for this? → https://nextjs.org/docs/community/contribution-guide

[nuclei272]

I came across the same problem. I do understand that what's being returned to the client is still the correct layout and page, but it's a weird behavior. Not sure if this also happens in production. Is there any light and update on this issue?

[pulgueta]

Any updates as of now?

Edit by maintainer bot: Comment was automatically minimized because it was considered unhelpful. (If you think this was by mistake, let us know). Please only comment if it adds context to the issue. If you want to express that you have the same problem, use the upvote 👍 on the issue description or subscribe to the issue for updates. Thanks!

[ShakurOo]

Same in V15.0.1 ...

Edit by maintainer bot: Comment was automatically minimized because it was considered unhelpful. (If you think this was by mistake, let us know). Please only comment if it adds context to the issue. If you want to express that you have the same problem, use the upvote 👍 on the issue description or subscribe to the issue for updates. Thanks!