-
Notifications
You must be signed in to change notification settings - Fork 26.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix redundant fetching of inactive default segments
- Loading branch information
Showing
16 changed files
with
172 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
3 changes: 3 additions & 0 deletions
3
test/production/app-dir/parallel-routes-prefetching/app/[letter]/@grid/default.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
export default function Default() { | ||
return null | ||
} |
3 changes: 3 additions & 0 deletions
3
test/production/app-dir/parallel-routes-prefetching/app/[letter]/@grid/loading.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
export default function Loading() { | ||
return <h1>Grid Loading</h1> | ||
} |
33 changes: 33 additions & 0 deletions
33
test/production/app-dir/parallel-routes-prefetching/app/[letter]/@grid/page.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,33 @@ | ||
import Link from 'next/link' | ||
|
||
const alphabet = Array.from('abcdefghijklmnopqrstuvwxyz') | ||
|
||
function getShuffledAlphabet() { | ||
return alphabet | ||
.map((value) => ({ value, sort: Math.random() })) | ||
.sort((a, b) => a.sort - b.sort) | ||
.map(({ value }) => value) | ||
} | ||
|
||
export default async function Page({ | ||
params: { letter }, | ||
}: { | ||
params: { letter: string } | ||
}) { | ||
await new Promise((r) => setTimeout(r, 250)) | ||
|
||
return ( | ||
<> | ||
<span id="letter-parallel">{letter}</span> | ||
<ul> | ||
{getShuffledAlphabet().map((letter) => ( | ||
<li key={letter}> | ||
<Link href={`/${letter}`}> | ||
<div>{letter}</div> | ||
</Link> | ||
</li> | ||
))} | ||
</ul> | ||
</> | ||
) | ||
} |
3 changes: 3 additions & 0 deletions
3
test/production/app-dir/parallel-routes-prefetching/app/[letter]/@grid2/default.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
export default function Default() { | ||
return null | ||
} |
3 changes: 3 additions & 0 deletions
3
test/production/app-dir/parallel-routes-prefetching/app/[letter]/@grid3/default.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
export default function Default() { | ||
return null | ||
} |
3 changes: 3 additions & 0 deletions
3
test/production/app-dir/parallel-routes-prefetching/app/[letter]/@grid4/default.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
export default function Default() { | ||
return null | ||
} |
3 changes: 3 additions & 0 deletions
3
test/production/app-dir/parallel-routes-prefetching/app/[letter]/@grid5/default.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
export default function Default() { | ||
return null | ||
} |
3 changes: 3 additions & 0 deletions
3
test/production/app-dir/parallel-routes-prefetching/app/[letter]/default.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
export default function Default() { | ||
return null | ||
} |
26 changes: 26 additions & 0 deletions
26
test/production/app-dir/parallel-routes-prefetching/app/[letter]/layout.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,26 @@ | ||
import { ReactNode } from 'react' | ||
|
||
type LetterLayoutProps = { | ||
params: { letter: string } | ||
children: ReactNode | ||
grid: ReactNode | ||
grid2: ReactNode | ||
grid3: ReactNode | ||
grid4: ReactNode | ||
grid5: ReactNode | ||
} | ||
|
||
export default function LetterLayout(props: LetterLayoutProps) { | ||
return ( | ||
<div className="bg-gray-100"> | ||
{props.children} | ||
<div className="bg-gray-400 p-4"> | ||
{props.grid} | ||
{props.grid2} | ||
{props.grid3} | ||
{props.grid4} | ||
{props.grid5} | ||
</div> | ||
</div> | ||
) | ||
} |
3 changes: 3 additions & 0 deletions
3
test/production/app-dir/parallel-routes-prefetching/app/[letter]/loading.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
export default function Loading() { | ||
return <h1>Loading</h1> | ||
} |
8 changes: 8 additions & 0 deletions
8
test/production/app-dir/parallel-routes-prefetching/app/[letter]/page.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
export default async function LetterPage({ | ||
params: { letter }, | ||
}: { | ||
params: { letter: string } | ||
}) { | ||
await new Promise((r) => setTimeout(r, 250)) | ||
return <h1 id="letter-page">{letter}</h1> | ||
} |
7 changes: 7 additions & 0 deletions
7
test/production/app-dir/parallel-routes-prefetching/app/layout.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
export default function Root({ children }: { children: React.ReactNode }) { | ||
return ( | ||
<html> | ||
<body>{children}</body> | ||
</html> | ||
) | ||
} |
5 changes: 5 additions & 0 deletions
5
test/production/app-dir/parallel-routes-prefetching/app/page.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
import Link from 'next/link' | ||
|
||
export default function Page() { | ||
return <Link href="/a">Go to a letter</Link> | ||
} |
6 changes: 6 additions & 0 deletions
6
test/production/app-dir/parallel-routes-prefetching/next.config.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
/** | ||
* @type {import('next').NextConfig} | ||
*/ | ||
const nextConfig = {} | ||
|
||
module.exports = nextConfig |
58 changes: 58 additions & 0 deletions
58
test/production/app-dir/parallel-routes-prefetching/parallel-routes-prefetching.test.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,58 @@ | ||
import { nextTestSetup } from 'e2e-utils' | ||
import { retry } from 'next-test-utils' | ||
|
||
describe('parallel-routes-prefetching', () => { | ||
const { next } = nextTestSetup({ | ||
files: __dirname, | ||
}) | ||
|
||
it('should not re-fetch data for the __DEFAULT__ segments when navigating within a dynamic segment', async () => { | ||
let prefetchRequests = [] | ||
let rscRequests = [] | ||
const browser = await next.browser('/a', { | ||
beforePageLoad(page) { | ||
page.on('request', (request) => { | ||
return request.allHeaders().then((headers) => { | ||
if (headers['Next-Router-Prefetch'.toLowerCase()] === '1') { | ||
prefetchRequests.push(request.url()) | ||
} else if (headers['RSC'.toLowerCase()] === '1') { | ||
rscRequests.push(request.url()) | ||
} | ||
}) | ||
}) | ||
}, | ||
}) | ||
|
||
expect(await browser.elementById('letter-page').text()).toBe('a') | ||
expect(await browser.elementById('letter-parallel').text()).toBe('a') | ||
|
||
await retry(() => { | ||
// we should see 25 prefetch requests for each letter of the alphabet (excluding the current) | ||
expect(prefetchRequests).toHaveLength(25) | ||
// and 0 RSC requests since we're not navigating to a different dynamic segment | ||
expect(rscRequests).toHaveLength(0) | ||
}) | ||
|
||
prefetchRequests = [] | ||
|
||
await browser.elementByCss('[href="/b"]').click() | ||
|
||
await retry(() => { | ||
// Navigating to a new dynamic segment should trigger any additional prefetch requests | ||
expect(prefetchRequests).toHaveLength(0) | ||
|
||
// but we except 2 RSC requests for the new page: | ||
// - one for the `children` slot | ||
// - one for the active parallel slot | ||
// TODO: It would be nice to achieve this in a single request, but it currently isn't possible, | ||
// because the router will see missing data for both slots simultaneously and kick off two separate requests. | ||
// PPR doesn't have this issue because it doesn't perform the "lazy fetch" in layout-router. | ||
expect(rscRequests).toHaveLength( | ||
process.env.__NEXT_EXPERIMENTAL_PPR ? 1 : 2 | ||
) | ||
}) | ||
|
||
expect(await browser.elementById('letter-page').text()).toBe('b') | ||
expect(await browser.elementById('letter-parallel').text()).toBe('b') | ||
}) | ||
}) |