Parallel default.tsx doesn't update on searchParams url changes

[pedro757]

Summary

I want to create a conditional modal for all sub-routes in a route, while also accessing search params server-side.

Project structure would be like this:

app
└── service-example/
         ├── @mymodal
                  └── default.tsx
         ├── page.tsx
         └── layout.tsx

Additional information

I need help here, please 🙏.

Example

https://github.com/pedro757/parallel-default-url

Steps to reproduce

1. Click multiple times the button
2. See that page's search params updates but slot's search params does not

[Juneezee]

As far as I know, Next.js only renders default.tsx on initial page load. This is also mentioned in the default.js docs page

On refresh, Next.js will render a default.js for @analytics. If default.js doesn't exist, a 404 is rendered instead.

[pedro757]

Is there a way to accomplish what I'm trying to do with app router?

I want to create a conditional modal for all sub-routes in a route while also accessing search params server-side

/service-example ---> show modal
/service-example/dashboard ----> show modal
/service-example/dashboard/settings ----> show modal

[pedro757]

You can also take a look at https://github.com/vercel/nextgram which demonstrates Parallel Routes and Intercepting Routes

The problem I see with Intercerpting Routes is that you have to specify the one route you want to intercept, but in my case I want to show this modal any route down /service-example it could be dozens of routes down there..

[Juneezee]

Is there a way to accomplish what I'm trying to do with app router?

I want to create a conditional modal for all sub-routes in a route while also accessing search params server-side

/service-example ---> show modal
/service-example/dashboard ----> show modal
/service-example/dashboard/settings ----> show modal

This is doable. The code is exactly the same as https://github.com/vercel/nextgram

2024-07-26.00-03-05.mp4

[pedro757]

No, that example only works for one route /photo/[id]/.

Also intercepting the route ends up with the same problem of my example when you hard reload the page. It will direct you to default.tsx which is not reactive to URL changes...

I believe default.tsx should not be static.

[Aleksion]

Yeah I just hit the same thing. I'm trying to keep a persistent AI chat window for sub routes using parallel slots and default pages. But reloading state and using SSR is extremely painful.

I've been a big NextJS fan, but the SSR story is quickly turning out to be a nightmare full of quirks