mirror of
https://github.com/hanzoai/next.js.git
synced 2026-10-30 14:46:38 +00:00
Zack TannerandGitHub
6dff88531a
### What When statically generating a page, Next.js will attempt to render the application tree twice, resulting in unexpected calls to upstream APIs and also slowing down the application during build as it needs to make 2 passes for the same data. ### Why Next.js currently calls React's `renderToReadableStream` API in two spots: once for the HTML render, and again for the Flight render. This is because we want to generate a `.rsc` output for statically generated pages, so that on navigation, we don't need to call the server to retrieve the flight payload. ### How Rather than calling `renderToReadableStream` twice, this refactors the approach to instead only perform it once. This introduces a new type to describe the response from calls to `createFromFetch`: `RSCPayload`, including a set of utils to access the relevant payload data, as it can change depending on calling context. - During the initial SSR response & when statically generating the flight payload, this will be an object containing the top-level props that are used to render `<AppRouter />` - For dynamic pages, this will only return the diffed component tree, which is computed by `walkTreeWithFlightRouterState` traversing the provided `next-router-state-tree` (from the client) to determine where to start rendering (**this is unchanged from today**) - For server actions, this will return the action result, in addition to the same payload as above (**this is also unchanged**) Fixes #58736 Fixes #43254 Fixes #60562 Closes NDX-17
104 lines
2.9 KiB
TypeScript
104 lines
2.9 KiB
TypeScript
import { NextInstance, createNext, isNextDeploy, isNextDev } from 'e2e-utils'
|
|
import { findPort } from 'next-test-utils'
|
|
import http from 'node:http'
|
|
|
|
describe('ppr-unstable-cache', () => {
|
|
if (isNextDeploy) {
|
|
it.skip('should not run in deploy mode', () => {})
|
|
return
|
|
}
|
|
|
|
if (isNextDev) {
|
|
it.skip('should not run in dev mode', () => {})
|
|
return
|
|
}
|
|
|
|
let next: NextInstance | null = null
|
|
let server: http.Server | null = null
|
|
afterEach(async () => {
|
|
if (next) {
|
|
await next.destroy()
|
|
next = null
|
|
}
|
|
|
|
if (server) {
|
|
await server.close()
|
|
server = null
|
|
}
|
|
})
|
|
|
|
it('should not cache inner fetch calls', async () => {
|
|
let generations: string[] = []
|
|
server = http.createServer(async (req, res) => {
|
|
try {
|
|
if (!req.url) throw new Error('No URL')
|
|
|
|
const cache = new URL(req.url, 'http://n').searchParams.get('cache')
|
|
if (!cache) throw new Error('No cache key')
|
|
|
|
const random = Math.floor(Math.random() * 1000).toString()
|
|
const data = cache + ':' + random
|
|
generations.push(data)
|
|
res.end(data)
|
|
} catch (err) {
|
|
res.statusCode = 500
|
|
res.end(err.message)
|
|
}
|
|
})
|
|
const port = await findPort()
|
|
server.listen(port)
|
|
|
|
next = await createNext({
|
|
files: __dirname,
|
|
env: { TEST_DATA_SERVER: `http://localhost:${port}/` },
|
|
})
|
|
|
|
expect(generations).toHaveLength(2)
|
|
|
|
const first = await next
|
|
.render$('/')
|
|
.then(($) => JSON.parse($('#data').text()))
|
|
|
|
expect(generations).toHaveLength(2)
|
|
|
|
expect(first.data.forceCache).toBeOneOf(generations)
|
|
expect(first.data.noStore).toBeOneOf(generations)
|
|
|
|
// Try a few more times, we should always get the same result.
|
|
for (let i = 0; i < 3; i++) {
|
|
const again = await next
|
|
.render$('/')
|
|
.then(($) => JSON.parse($('#data').text()))
|
|
|
|
expect(generations).toHaveLength(2)
|
|
expect(first).toEqual(again)
|
|
}
|
|
|
|
// Revalidate the tag associated with the `unstable_cache` call.
|
|
const revalidate = await next.fetch('/revalidate-tag', { method: 'POST' })
|
|
expect(revalidate.status).toBe(200)
|
|
await revalidate.text()
|
|
|
|
const revalidated = await next
|
|
.render$('/')
|
|
.then(($) => JSON.parse($('#data').text()))
|
|
|
|
// Expect that the `cache: no-store` value has been updated, but not
|
|
// the `cache: force-cache` value.
|
|
expect(generations).toHaveLength(3)
|
|
|
|
// We know now that the generations have been updated, so let's try to
|
|
// validate the value. We don't need to do this within the retry.
|
|
expect(revalidated.random).not.toEqual(first.random)
|
|
expect(revalidated.data.forceCache).toBe(generations[1])
|
|
expect(revalidated.data.noStore).toBe(generations[2])
|
|
expect(revalidated).not.toEqual(first)
|
|
|
|
// Ensure that the `force-cache` value has not been updated, and only called
|
|
// once.
|
|
expect(generations.filter((g) => g.startsWith('force-cache'))).toHaveLength(
|
|
1
|
|
)
|
|
})
|
|
})
|