diff --git a/packages/nuxt/src/app/components/nuxt-island.ts b/packages/nuxt/src/app/components/nuxt-island.ts index 24e3e16891..f1a6e20005 100644 --- a/packages/nuxt/src/app/components/nuxt-island.ts +++ b/packages/nuxt/src/app/components/nuxt-island.ts @@ -109,7 +109,6 @@ export default defineComponent({ components: {} } - if (nuxtApp.isHydrating) { payloads.slots = toRaw(nuxtApp.payload.data[`${props.name}_${hashId.value}`])?.slots ?? {} payloads.components = toRaw(nuxtApp.payload.data[`${props.name}_${hashId.value}`])?.components ?? {} @@ -119,6 +118,8 @@ export default defineComponent({ if (import.meta.client && nuxtApp.isHydrating) { 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(ssrHTML.value.match(SSR_UID_RE)?.[1] ?? getId()) @@ -149,7 +150,7 @@ export default defineComponent({ async function _fetchComponent (force = false) { 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` diff --git a/test/basic.test.ts b/test/basic.test.ts index 890e22ab65..e18a38133d 100644 --- a/test/basic.test.ts +++ b/test/basic.test.ts @@ -2134,11 +2134,11 @@ describe.skipIf(isDev() || isWindows || !isRenderingJson)('payload rendering', ( await gotoPath(page, '/random/a') // 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 - expect(requests).not.toContain(expect.stringContaining('/api/random')) - expect(requests).not.toContain(expect.stringContaining('/__nuxt_island')) + expect(requests).not.toContainEqual(expect.stringContaining('/api/random')) + expect(requests).not.toContainEqual(expect.stringContaining('/__nuxt_island')) // requests.length = 0 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 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 - 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 // 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 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 // Note: we refetch on dev as urls differ between '' and '?import' diff --git a/test/fixtures/basic/pages/random/[id].vue b/test/fixtures/basic/pages/random/[id].vue index 4322c7b379..6ae5bfbb73 100644 --- a/test/fixtures/basic/pages/random/[id].vue +++ b/test/fixtures/basic/pages/random/[id].vue @@ -2,7 +2,7 @@
Home