Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix navigation applying stale data when triggered from global not found #62033

Merged
merged 3 commits into from
Feb 14, 2024
Merged

fix navigation applying stale data when triggered from global not found #62033

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
fc01c8e
fix navigation applying stale data when triggered from global not found
ztanner Feb 14, 2024
69d5687
handle special segment on client rather than triggering an mpa naviga…
ztanner Feb 14, 2024
a547b3a
Update packages/next/src/client/components/router-reducer/is-navigati…
ztanner Feb 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions packages/next/src/server/app-render/app-render.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -405,6 +405,16 @@ async function ReactServerApp({ tree, ctx, asNotFound }: ReactServerAppProps) {
query
)

// If the page we're rendering is being treated as the global not-found page, we want to special-case
// the segment key so it doesn't collide with a page matching the same path.
// This is necessary because when rendering the global not-found, it will always be the root segment.
// If the not-found page prefetched a link to the root page, it would have the same data path
// (e.g., ['', { children: ['__PAGE__', {}] }]). Without this disambiguation, the router would interpret
// these pages as being able to share the same cache nodes, which is not the case as they render different things.
if (asNotFound) {
initialTree[0] = '__NOT_FOUND__'
}

const [MetadataTree, MetadataOutlet] = createMetadataComponents({
tree,
errorType: asNotFound ? 'not-found' : undefined,
Expand Down
19 changes: 19 additions & 0 deletions test/e2e/app-dir/prefetching-not-found/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
// we want the layout to opt-out of static prefetching
export const dynamic = 'force-dynamic'

import Link from 'next/link'

export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>
<Link href="/">Link to `/`</Link>
<div>{children}</div>
</body>
</html>
)
}
10 changes: 10 additions & 0 deletions test/e2e/app-dir/prefetching-not-found/app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import Link from 'next/link'

export default function Home() {
return (
<div>
<h1>Home Page</h1>
<Link href="/fake-link">Go to Invalid Page</Link>
</div>
)
}
40 changes: 40 additions & 0 deletions test/e2e/app-dir/prefetching-not-found/prefetching-not-found.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
import { nextTestSetup } from 'e2e-utils'
import { retry } from 'next-test-utils'

describe('prefetching-not-found', () => {
const { next } = nextTestSetup({
files: __dirname,
})

it('should correctly navigate to/from a global 404 page when following links with prefetch=auto', async () => {
let browser = await next.browser('/')
expect(await browser.elementByCss('h1').text()).toBe('Home Page')

await browser.elementByCss("[href='/fake-link']").click()

await retry(async () => {
expect(await browser.elementByCss('body').text()).toContain(
'This page could not be found.'
)
})

await browser.elementByCss("[href='/']").click()

await retry(async () => {
expect(await browser.elementByCss('h1').text()).toBe('Home Page')
})

// assert the same behavior, but starting at the not found page. This is to ensure that when we seed the prefetch cache,
// we don't have any cache collisions that would cause the not-found page to remain rendered when following a link to the home page
browser = await next.browser('/fake-link')
expect(await browser.elementByCss('body').text()).toContain(
'This page could not be found.'
)

await browser.elementByCss("[href='/']").click()

await retry(async () => {
expect(await browser.elementByCss('h1').text()).toBe('Home Page')
})
})
})
Loading