mirror of
https://github.com/hanzoai/next.js.git
synced 2026-09-24 17:00:51 +00:00
Andrew ClarkandGitHub
61803f818a
### Depends on - #60577 --- A popstate navigation reads data from the local cache. It does not issue new network requests (unless the cache entries have been evicted). So, when navigating with back/forward, we should not switch back to the PPR loading state. We should render the full, cached dynamic data immediately. To implement this, on a popstate navigation, we update the cache to drop the prefetch data for any segment whose dynamic data was already received. We clone the entire cache node tree and set the `prefetchRsc` field to `null` to prevent it from being rendered. (We can't mutate the node in place because Cache Node is a concurrent data structure.) Technically, what we're actually checking is whether the dynamic network response was received. But since it's a streaming response, this does not mean that all the dynamic data has fully streamed in. It just means that _some_ of the dynamic data was received. But as a heuristic, we assume that the rest dynamic data will stream in quickly, so it's still better to skip the prefetch state. Closes NEXT-2084
105 lines
3.5 KiB
TypeScript
105 lines
3.5 KiB
TypeScript
import { createNext } from 'e2e-utils'
|
|
import { findPort } from 'next-test-utils'
|
|
import { createTestDataServer } from 'test-data-service/writer'
|
|
import { createTestLog } from 'test-log'
|
|
|
|
describe('stale-prefetch-entry', () => {
|
|
if ((global as any).isNextDev) {
|
|
test('ppr is disabled in dev', () => {})
|
|
return
|
|
}
|
|
|
|
let server
|
|
let next
|
|
afterEach(async () => {
|
|
await next?.destroy()
|
|
server?.close()
|
|
})
|
|
|
|
// This is a regression test where a condition that checked whether a cached
|
|
// route entry was stale accidentally caused the router to treat prefetched
|
|
// data as if it were complete data that didn't contain dynamic holes. This
|
|
// prevented the dynamic data from ever streaming in.
|
|
test(
|
|
'works if a prefetched route entry has become stale (too much ' +
|
|
'time has elapsed since it was prefetched)',
|
|
async () => {
|
|
const TestLog = createTestLog()
|
|
let autoresolveRequests = true
|
|
let pendingRequests = new Map()
|
|
server = createTestDataServer(async (key, res) => {
|
|
TestLog.log('REQUEST: ' + key)
|
|
if (autoresolveRequests) {
|
|
res.resolve()
|
|
return
|
|
}
|
|
if (pendingRequests.has(key)) {
|
|
throw new Error('Request already pending for ' + key)
|
|
}
|
|
pendingRequests.set(key, res)
|
|
})
|
|
const port = await findPort()
|
|
server.listen(port)
|
|
next = await createNext({
|
|
files: __dirname,
|
|
env: { TEST_DATA_SERVICE_URL: `http://localhost:${port}` },
|
|
})
|
|
TestLog.assert(['REQUEST: Some data [static]'])
|
|
autoresolveRequests = false
|
|
|
|
const browser = await next.browser('/', {
|
|
// Override Date.now so we can simulate time passing to expire a
|
|
// prefetch entry.
|
|
async beforePageLoad(page) {
|
|
await page.addInitScript(`
|
|
__FAKE_NOW__ = 0
|
|
Date = class extends Date {
|
|
constructor(...args) {
|
|
if (args.length === 0) {
|
|
super(__FAKE_NOW__)
|
|
} else {
|
|
super(...args)
|
|
}
|
|
}
|
|
static now() {
|
|
return __FAKE_NOW__
|
|
}
|
|
}
|
|
`)
|
|
},
|
|
})
|
|
|
|
const startTime = await browser.eval(() => Date.now())
|
|
|
|
// Explicitly hover over the link to trigger a prefetch.
|
|
const link = await browser.elementByCss('a[href="/some-page"]')
|
|
await link.hover()
|
|
|
|
// Increment time by 3 minutes. This is longer than the default expiration
|
|
// interval for prefetch entries.
|
|
await browser.eval(`__FAKE_NOW__ = 60 * 1000 * 3`)
|
|
const endTime = await browser.eval(() => Date.now())
|
|
// Sanity check.
|
|
expect(endTime - startTime).toBe(60 * 1000 * 3)
|
|
|
|
// Navigate. The prefetch entry will be stale.
|
|
await link.click()
|
|
|
|
// The static UI appears immediately because it was prerendered at
|
|
// build time.
|
|
const staticContainer = await browser.elementById('static')
|
|
expect(await staticContainer.innerText()).toBe('Some data [static]')
|
|
|
|
// The dynamic data is fetched on navigation. (In the regression case that
|
|
// this test simulates, the dynamic data was never requested, and the page
|
|
// got stuck in a loading state.)
|
|
await TestLog.waitFor(['REQUEST: Some data [dynamic]'])
|
|
pendingRequests.get('Some data [dynamic]').resolve()
|
|
|
|
// Now the dynamic data appears.
|
|
const dynamicContainer = await browser.elementById('dynamic')
|
|
expect(await dynamicContainer.innerText()).toBe('Some data [dynamic]')
|
|
}
|
|
)
|
|
})
|