Refreshing an intercepted parallel route `(modal)` breaks router #51714

pedro757 · 2023-06-23T15:24:26Z

Verify canary release

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

Provide environment information

Operating System:
      Platform: linux
      Arch: x64
      Version: #1 SMP PREEMPT_DYNAMIC Sun Jun  4 12:31:46 UTC 2023
    Binaries:
      Node: 18.16.0
      npm: 9.6.7
      Yarn: N/A
      pnpm: 8.6.1
    Relevant packages:
      next: 13.4.7
      eslint-config-next: 13.4.7
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.1.3

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

App directory (appDir: true), Routing (next/router, next/navigation, next/link)

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

https://codesandbox.io/p/sandbox/goofy-williamson-myrykt

To Reproduce

Steps to reproduce:

Click Go to Login Page Button
Click Refresh Button
Click Go Back Button

Describe the Bug

When refreshing an intercepted parallel route the router stops working and then you can't go to any other route because the intercepted route doesn't disappear.

Expected Behavior

I expect the intercepted parallel route to disappear and take me to the correct route

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

_NEXT-2030

The text was updated successfully, but these errors were encountered:

jmarbutt · 2023-07-22T18:44:39Z

I am having a very similar issue.

Fredkiss3 · 2023-08-08T14:01:50Z

Tested with the latest canary version of nextjs, it's still present.

joeleonard212 · 2023-08-15T01:39:11Z

I'm having the same issue as described from @pedro757

When calling router.refresh() from within a @modal/intercept/page.tsx rendered component, the underlying server component doesn't fetch new data.

Also, if I call router.back() right after, the component persist rendered on the back url and can only be removed manually refreshing the browser.

When the component is called on its own normal route (so when I refresh the browser from the modal view) is working fine

joeleonard212 · 2023-08-17T01:50:16Z

Hey guys, it seems they've released new docs and an extensive explanation of how the cache works. Everything is here!
#54075

Fredkiss3 · 2023-08-17T01:57:29Z

@joeleonard212 This is a total different discussion from this issue.

joeleonard212 · 2023-08-17T02:30:16Z

@joeleonard212 This is a total different discussion from this issue.

You sure ?

The Component Cache keeps track of each rendered segment separately, in doing so it unlocks a bunch of features:

Navigating between pages reusing segments (Partial Navigation).

Instant back/forward navigation that preserves the browser scroll position

Parallel Routes / Interception, as you can keep the segment cache nodes of multiple pages at the same time. The Router Tree is the other piece in making Parallel Routes work as that decides what is being shown on screen._

Purging individual segments of the router cache (i.e. router.refresh() purges the entire cache, but revalidatePath('/dashboard') will only purge the client-side router cache below the specified dashboard path in the near future).

I found it usefull since personally I fixed changing caching strategy. If a component requires interaction with the user, I just don't rely on router.refresh() but I manage the cache using tags and server actions. Also, to correctly use intercepted routes, you should check if you are taking care of router tree

Fredkiss3 · 2023-08-17T09:28:41Z

@joeleonard212
Can you share the fix then ?

joeleonard212 · 2023-08-17T16:13:03Z

@joeleonard212 Can you share the fix then ?

Sure, hope this can be helpfull https://github.com/joeleonard212/Intercept_and_Revalidate/tree/main

this is just an example of how I'm using the following to let things work:

server_actions
unstable_cache
revalidate_tag (or revalidate_path, depending on your needing)

I think what a lot of people is missing is that the use of server_actions and tags to manage stored data is the direction Next.js will likely follow in the future

joeleonard212 · 2023-08-17T16:17:54Z

sample-2023-08-17_18.24.53.mp4

joeleonard212 · 2023-08-17T16:35:24Z

Just want to point out that I'm using the unstable_cache cause relying on a third party libraries to fetch data.

If you actually use await fetch yourself, it's even simpler cause you do not need to use unstable_cache to tag fetched data.
My next step is adopting useOptimistic() hook to let the update be instantaneous

I use arch btw

gragland · 2023-08-24T04:41:16Z

Also having this issue on 13.4.20-canary.4. The problem persists even after navigating away from the intercepted route with <Link> or router.push.

akomm · 2023-08-29T14:59:46Z

I think it has nothing to do with specifically intercepting routes. It just happens with parallel routes:

#54723

Also: soft navigating does not unmount the page in the parallel route slot. So modals won't disappear that easy. Its not a bug. But using refresh is bugged and routing stops working.

### What When a parallel segment in the current router tree is no longer "active" during a soft navigation (ie, no longer matches a page component on the particular route), it remains on-screen until the page is refreshed, at which point it would switch to rendering the `default.tsx` component. However, when revalidating the router cache via `router.refresh`, or when a server action finishes & refreshes the router cache, this would trigger the "hard refresh" behavior. This would have the unintended consequence of a 404 being triggered (which is the default behavior of `default.tsx`) or inactive segments disappearing unexpectedly. ### Why When the router cache is refreshed, it currently fetches new data for the page by fetching from the current URL the user is on. This means that the server will never respond with the data it needs if the segment wasn't "activated" via the URL we're fetching from, as it came from someplace else. Instead, the server will give us data for the `default.tsx` component, which we don't want to render when doing a soft refresh. ### How This updates the `FlightRouterState` to encode information about the URL that caused the segment to become active. That way, when some sort of revalidation event takes place, we can both refresh the data for the current URL (existing handling), and recursively refetch segment data for anything that was still present in the tree but requires fetching from a different URL. We patch this new data into the tree before committing the final `CacheNode` to the router. **Note**: I re-used the existing `refresh` and `url` arguments in `FlightRouterState` to avoid introducing more options to this data structure that is already a bit tricky to work with. Initially I was going to re-use `"refetch"` as-is, which seemed to work ok, but I'm worried about potential implications of this considering they have different semantics. In an abundance of caution, I added a new marker type ("`refresh`", alternative suggestions welcome). This has some trade-offs: namely, if there are a lot of different segments that are in this stale state that require data from different URLs, the refresh is going to be blocked while we fetch all of these segments. Having to do a separate round-trip for each of these segments could be expensive. In an ideal world, we'd be able to enumerate the segments we'd want to refetch and where they came from, so it could be handled in a single round-trip. There are some ideas on how to improve per-segment fetching which are out of scope of this PR. However, due to the implicit contract that `middleware.ts` creates with URLs, we still need to identify these resources by URLs. Fixes #60815 Fixes #60950 Fixes #51711 Fixes #51714 Fixes #58715 Fixes #60948 Fixes #62213 Fixes #61341 Closes NEXT-1845 Closes NEXT-2030

github-actions · 2024-04-12T00:04:20Z

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.

pedro757 added the bug Issue was opened via the bug report template. label Jun 23, 2023

github-actions bot added area: app App directory (appDir: true) Navigation Related to Next.js linking (e.g., <Link>) and navigation. labels Jun 23, 2023

pedro757 mentioned this issue Aug 8, 2023

[Bug] next/link is not calling the server for subsequent navigations on dynamic routes #42991

Closed

samcx mentioned this issue Jan 9, 2024

router.push("/") broken when intercepting routes as modal with parallel routes #51711

Closed

1 task

samcx added the linear: next Confirmed issue that is tracked by the Next.js team. label Jan 9, 2024

ksyunnnn mentioned this issue Jan 10, 2024

It makes the router break if using a parallel route ksyunnnn/Careers#5

Open

ztanner mentioned this issue Feb 15, 2024

RevalidateTag from Server Action changes default slot in parallel route #60815

Closed

1 task

This was referenced Mar 5, 2024

Calling revalidatePath() or revalidateTag() in Server Actions triggered by Intercepting Routes breaks routing #60950

Closed

revalidateTag and revalidatePath redirect to intercepting route when inside dynamic route #59796

Closed

ztanner mentioned this issue Mar 22, 2024

fix revalidation/refresh behavior with parallel routes #63608

Merged

ztanner mentioned this issue Mar 28, 2024

fix revalidation/refresh behavior with parallel routes #63607

Merged

ztanner closed this as completed in #63607 Mar 28, 2024

ztanner closed this as completed in 68de4c0 Mar 28, 2024

github-actions bot added the locked label Apr 12, 2024

github-actions bot locked as resolved and limited conversation to collaborators Apr 12, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Refreshing an intercepted parallel route `(modal)` breaks router #51714

Refreshing an intercepted parallel route `(modal)` breaks router #51714

pedro757 commented Jun 23, 2023 •

edited by padmaia

jmarbutt commented Jul 22, 2023

Fredkiss3 commented Aug 8, 2023

joeleonard212 commented Aug 15, 2023 •

edited

joeleonard212 commented Aug 17, 2023

Fredkiss3 commented Aug 17, 2023

joeleonard212 commented Aug 17, 2023 •

edited

Fredkiss3 commented Aug 17, 2023

joeleonard212 commented Aug 17, 2023 •

edited

joeleonard212 commented Aug 17, 2023 •

edited

joeleonard212 commented Aug 17, 2023 •

edited

gragland commented Aug 24, 2023 •

edited

akomm commented Aug 29, 2023 •

edited

github-actions bot commented Apr 12, 2024

Refreshing an intercepted parallel route (modal) breaks router #51714

Refreshing an intercepted parallel route (modal) breaks router #51714

Comments

pedro757 commented Jun 23, 2023 • edited by padmaia

Verify canary release

Provide environment information

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

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

To Reproduce

Describe the Bug

Expected Behavior

Which browser are you using? (if relevant)

How are you deploying your application? (if relevant)

jmarbutt commented Jul 22, 2023

Fredkiss3 commented Aug 8, 2023

joeleonard212 commented Aug 15, 2023 • edited

joeleonard212 commented Aug 17, 2023

Fredkiss3 commented Aug 17, 2023

joeleonard212 commented Aug 17, 2023 • edited

Fredkiss3 commented Aug 17, 2023

joeleonard212 commented Aug 17, 2023 • edited

joeleonard212 commented Aug 17, 2023 • edited

joeleonard212 commented Aug 17, 2023 • edited

gragland commented Aug 24, 2023 • edited

akomm commented Aug 29, 2023 • edited

github-actions bot commented Apr 12, 2024

Refreshing an intercepted parallel route `(modal)` breaks router #51714

Refreshing an intercepted parallel route `(modal)` breaks router #51714

pedro757 commented Jun 23, 2023 •

edited by padmaia

joeleonard212 commented Aug 15, 2023 •

edited

joeleonard212 commented Aug 17, 2023 •

edited

joeleonard212 commented Aug 17, 2023 •

edited

joeleonard212 commented Aug 17, 2023 •

edited

joeleonard212 commented Aug 17, 2023 •

edited

gragland commented Aug 24, 2023 •

edited

akomm commented Aug 29, 2023 •

edited