From b4bce578c653c6e7f34ffe89aa38a5f979e3d923 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Wed, 6 Mar 2024 11:55:06 +0000
Subject: [PATCH] fix(nuxt): don't refetch server components in initial html
 (#26089)

---
 packages/nuxt/src/app/components/nuxt-island.ts |  5 +++--
 test/basic.test.ts                              | 12 ++++++------
 test/fixtures/basic/pages/random/[id].vue       |  2 +-
 3 files changed, 10 insertions(+), 9 deletions(-)

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<string>(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 @@
   <div>
     <NuxtLink
       to="/"
-      prefetched-class="prefetched"
+      no-prefetch
     >
       Home
     </NuxtLink>