Skip to content

Commit

Permalink
fix: prevent infinite dev refresh on nested parallel routes (#52362)
Browse files Browse the repository at this point in the history
### What?
HMR causes infinite reloads for parallel routes when the corresponding page component is nested

### Why?
In 4900fa2, code was added to remove `/@children` from the page path (if present) but in 59b3634, `normalizeParallelKey` removes the @ prefix from children, so this doesn't seem to be catching the scenario it was intended to prevent

### How?
This updates the existing replace logic to consider `/children/page` rather than `/@children/page` -- it doesn't seem like `/@children` is a valid scenario given the `normalizeParallelKey` behavior

Fixes #52342 and addresses the concerns in #52061 (comment)
  • Loading branch information
ztanner authored Jul 7, 2023
1 parent eb3d748 commit 412992a
Show file tree
Hide file tree
Showing 5 changed files with 44 additions and 3 deletions.
6 changes: 3 additions & 3 deletions packages/next/src/server/dev/on-demand-entry-handler.ts
Original file line number Diff line number Diff line change
Expand Up @@ -98,9 +98,9 @@ export function getEntryKey(
pageBundleType: 'app' | 'pages' | 'root',
page: string
) {
// TODO: handle the /@children slot better
// this is a quick hack to handle when children is provided as @children/page instead of /page
return `${compilerType}@${pageBundleType}@${page.replace(/\/@children/g, '')}`
// TODO: handle the /children slot better
// this is a quick hack to handle when children is provided as children/page instead of /page
return `${compilerType}@${pageBundleType}@${page.replace(/\/children/g, '')}`
}

function getPageBundleType(pageBundlePath: string) {
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
export default function ParallelPage() {
return (
<>
<p>Hello from nested parallel page!</p>
<div id="timestamp">{Date.now()}</div>
</>
)
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
export default function Layout({ parallelB }: { parallelB: React.ReactNode }) {
return (
<main>
<h3>{`(parallelB)`}</h3>
<div>{parallelB}</div>
</main>
)
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
export default function Parallel({ children }) {
return (
<div>
parallel/layout:
<div className="parallel" title="children">
{children}
</div>
</div>
)
}
Original file line number Diff line number Diff line change
Expand Up @@ -354,6 +354,21 @@ createNextDescribe(
return newTimestamp !== timestamp ? 'failure' : 'success'
}, 'success')
})

it('should support nested parallel routes', async () => {
const browser = await next.browser('parallel-nested/home/nested')
const timestamp = await browser.elementByCss('#timestamp').text()

await new Promise((resolve) => {
setTimeout(resolve, 3000)
})

await check(async () => {
// an invalid response triggers a fast refresh, so if the timestamp doesn't update, this behaved correctly
const newTimestamp = await browser.elementByCss('#timestamp').text()
return newTimestamp !== timestamp ? 'failure' : 'success'
}, 'success')
})
}
})

Expand Down

0 comments on commit 412992a

Please sign in to comment.