fix(nuxt): don't refetch server components in initial html (#26089)

This commit is contained in:
Daniel Roe 2024-03-06 11:55:06 +00:00 committed by GitHub
parent b90b4da4ce
commit b4bce578c6
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 10 additions and 9 deletions

View File

@ -109,7 +109,6 @@ export default defineComponent({
components: {} components: {}
} }
if (nuxtApp.isHydrating) { if (nuxtApp.isHydrating) {
payloads.slots = toRaw(nuxtApp.payload.data[`${props.name}_${hashId.value}`])?.slots ?? {} payloads.slots = toRaw(nuxtApp.payload.data[`${props.name}_${hashId.value}`])?.slots ?? {}
payloads.components = toRaw(nuxtApp.payload.data[`${props.name}_${hashId.value}`])?.components ?? {} payloads.components = toRaw(nuxtApp.payload.data[`${props.name}_${hashId.value}`])?.components ?? {}
@ -119,6 +118,8 @@ export default defineComponent({
if (import.meta.client && nuxtApp.isHydrating) { if (import.meta.client && nuxtApp.isHydrating) {
ssrHTML.value = getFragmentHTML(instance.vnode?.el ?? null, true)?.join('') || '' ssrHTML.value = getFragmentHTML(instance.vnode?.el ?? null, true)?.join('') || ''
const key = `${props.name}_${hashId.value}`
nuxtApp.payload.data[key].html = ssrHTML.value
} }
const uid = ref<string>(ssrHTML.value.match(SSR_UID_RE)?.[1] ?? getId()) const uid = ref<string>(ssrHTML.value.match(SSR_UID_RE)?.[1] ?? getId())
@ -149,7 +150,7 @@ export default defineComponent({
async function _fetchComponent (force = false) { async function _fetchComponent (force = false) {
const key = `${props.name}_${hashId.value}` const key = `${props.name}_${hashId.value}`
if (nuxtApp.payload.data[key]?.html && !force) { return nuxtApp.payload.data[key] } if (!force && nuxtApp.payload.data[key]?.html) { return nuxtApp.payload.data[key] }
const url = remoteComponentIslands && props.source ? new URL(`/__nuxt_island/${key}.json`, props.source).href : `/__nuxt_island/${key}.json` const url = remoteComponentIslands && props.source ? new URL(`/__nuxt_island/${key}.json`, props.source).href : `/__nuxt_island/${key}.json`

View File

@ -2134,11 +2134,11 @@ describe.skipIf(isDev() || isWindows || !isRenderingJson)('payload rendering', (
await gotoPath(page, '/random/a') await gotoPath(page, '/random/a')
// We are manually prefetching other payloads // We are manually prefetching other payloads
await page.waitForRequest(url('/random/c/_payload.json')) await page.waitForRequest(request => request.url().includes('/random/c/_payload.json'))
// We are not triggering API requests in the payload // We are not triggering API requests in the payload
expect(requests).not.toContain(expect.stringContaining('/api/random')) expect(requests).not.toContainEqual(expect.stringContaining('/api/random'))
expect(requests).not.toContain(expect.stringContaining('/__nuxt_island')) expect(requests).not.toContainEqual(expect.stringContaining('/__nuxt_island'))
// requests.length = 0 // requests.length = 0
await page.click('[href="/random/b"]') await page.click('[href="/random/b"]')
@ -2146,10 +2146,10 @@ describe.skipIf(isDev() || isWindows || !isRenderingJson)('payload rendering', (
// We are not triggering API requests in the payload in client-side nav // We are not triggering API requests in the payload in client-side nav
expect(requests).not.toContain('/api/random') expect(requests).not.toContain('/api/random')
expect(requests).not.toContain(expect.stringContaining('/__nuxt_island')) expect(requests).not.toContainEqual(expect.stringContaining('/__nuxt_island'))
// We are fetching a payload we did not prefetch // We are fetching a payload we did not prefetch
expect(requests).toContain('/random/b/_payload.json') expect(requests).toContainEqual(expect.stringContaining('/random/b/_payload.json'))
// We are not refetching payloads we've already prefetched // We are not refetching payloads we've already prefetched
// expect(requests.filter(p => p.includes('_payload')).length).toBe(1) // expect(requests.filter(p => p.includes('_payload')).length).toBe(1)
@ -2160,7 +2160,7 @@ describe.skipIf(isDev() || isWindows || !isRenderingJson)('payload rendering', (
// We are not triggering API requests in the payload in client-side nav // We are not triggering API requests in the payload in client-side nav
expect(requests).not.toContain('/api/random') expect(requests).not.toContain('/api/random')
expect(requests).not.toContain(expect.stringContaining('/__nuxt_island')) expect(requests).not.toContainEqual(expect.stringContaining('/__nuxt_island'))
// We are not refetching payloads we've already prefetched // We are not refetching payloads we've already prefetched
// Note: we refetch on dev as urls differ between '' and '?import' // Note: we refetch on dev as urls differ between '' and '?import'

View File

@ -2,7 +2,7 @@
<div> <div>
<NuxtLink <NuxtLink
to="/" to="/"
prefetched-class="prefetched" no-prefetch
> >
Home Home
</NuxtLink> </NuxtLink>