Next.js Discord

Discord Forum

5 parallel routes results in 5×5 rerenders when doing router.push()

Unanswered
American Wirehair posted this in #help-forum
Open in Discord
American WirehairOP
(cross-posted from https://github.com/orgs/vercel/discussions/7151)

When doing router.push() inside a parallel route, all n parallel routes render n times.

Say there are 5 parallel routes. Ideally, when a new route is pushed, each parallel route should have been rendered only once. (see first image)

However, that is not what happens. Here is an example with 4 parallel routes. Each parallel route renders 4 times in total. (see second image)

And here is an example with 5 parllel routes. Each parallel route renders 5 times in total. (see third image)

Reproduction repo can be found here
https://github.com/revosw/nextparallelrepro

Steps to Reproduce:
1) Clone repository
2) Install dependencies
3) Start development server and keep the server console open
4) Press one of the "push route" buttons
5) Notice how the server console (not the browser console) prints getA, getB, getC, getD and getE five times in succession. I have set getE to have a 5 second timeout.

1 Reply

American WirehairOP
After upgrading to next@15.0.0-canary.21, doing router.push() in parallel routes work as expected. Since it did not work in next@15.0.0-canary.20, I thought maybe the four changed lines in packages/next/src/client/components/router-reducer/reducers/navigate-reducer.ts was all it took to resolve it. But it seems to be a culmination of different work, as I tried to update to next@14.2.3 and apply the changes in this pr directly to next inside node_modules:
https://github.com/vercel/next.js/pull/66681