Merge 0861bdb7ba into 160efe7a7f

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

.github/workflows/ci.yml

@@ -236,7 +236,7 @@ jobs:
           path: packages
 
       - name: Run benchmarks
-        uses: CodSpeedHQ/action@da7c57859a7a565a3a92789ac64c41aca031ca1f # v3.3.0
+        uses: CodSpeedHQ/action@1015f4f828ff74b7a950909897fe581d6ba868cc # v3.3.1
         with:
           run: pnpm vitest bench
           token: ${{ secrets.CODSPEED_TOKEN }}

docs/3.api/1.components/8.nuxt-island.md

@@ -32,7 +32,10 @@ Server only components use `<NuxtIsland>` under the hood
   - **type**: `Record<string, any>`
 - `source`: Remote source to call the island to render.
   - **type**: `string`
-- **dangerouslyLoadClientComponents**: Required to load components from a remote source.
+- `useCache`: Use the cached payload if available
+  - **type**: `boolean`
+  - **default**: `true`
+- **`dangerouslyLoadClientComponents`**: Required to load components from a remote source.
   - **type**: `boolean`
   - **default**: `false`
 

package.json

@@ -37,7 +37,7 @@
     "typecheck:docs": "DOCS_TYPECHECK=true pnpm nuxi prepare && nuxt-content-twoslash verify --content-dir docs --languages html"
   },
   "resolutions": {
-    "@babel/core": "7.26.8",
+    "@babel/core": "7.26.9",
     "@babel/helper-plugin-utils": "7.26.5",
     "@nuxt/cli": "3.21.1",
     "@nuxt/kit": "workspace:*",
@@ -45,12 +45,12 @@
     "@nuxt/schema": "workspace:*",
     "@nuxt/vite-builder": "workspace:*",
     "@nuxt/webpack-builder": "workspace:*",
-    "@types/node": "22.13.2",
-    "@unhead/dom": "1.11.18",
-    "@unhead/schema": "1.11.18",
-    "@unhead/shared": "1.11.18",
-    "@unhead/ssr": "1.11.18",
-    "@unhead/vue": "1.11.18",
+    "@types/node": "22.13.4",
+    "@unhead/dom": "1.11.19",
+    "@unhead/schema": "1.11.19",
+    "@unhead/shared": "1.11.19",
+    "@unhead/ssr": "1.11.19",
+    "@unhead/vue": "1.11.19",
     "@vue/compiler-core": "3.5.13",
     "@vue/compiler-dom": "3.5.13",
     "@vue/shared": "3.5.13",
@@ -62,19 +62,19 @@
     "nuxt": "workspace:*",
     "ohash": "1.1.4",
     "postcss": "8.5.2",
-    "rollup": "4.34.6",
+    "rollup": "4.34.8",
     "send": ">=1.1.0",
     "typescript": "5.7.3",
     "ufo": "1.5.4",
     "unbuild": "3.3.1",
-    "unhead": "1.11.18",
-    "unimport": "4.1.1",
+    "unhead": "1.11.19",
+    "unimport": "4.1.2",
     "vite": "6.1.0",
     "vue": "3.5.13"
   },
   "devDependencies": {
     "@arethetypeswrong/cli": "0.17.3",
-    "@babel/core": "7.26.8",
+    "@babel/core": "7.26.9",
     "@babel/helper-plugin-utils": "7.26.5",
     "@codspeed/vitest-plugin": "4.0.0",
     "@nuxt/cli": "3.21.1",
@@ -86,10 +86,10 @@
     "@testing-library/vue": "8.1.0",
     "@types/babel__core": "7.20.5",
     "@types/babel__helper-plugin-utils": "7.10.3",
-    "@types/node": "22.13.2",
+    "@types/node": "22.13.4",
     "@types/semver": "7.5.8",
-    "@unhead/schema": "1.11.18",
-    "@unhead/vue": "1.11.18",
+    "@unhead/schema": "1.11.19",
+    "@unhead/vue": "1.11.19",
     "@vitest/coverage-v8": "3.0.5",
     "@vue/test-utils": "2.4.6",
     "acorn": "8.14.0",
@@ -120,12 +120,12 @@
     "pathe": "2.0.3",
     "pkg-pr-new": "0.0.39",
     "playwright-core": "1.50.1",
-    "rollup": "4.34.6",
+    "rollup": "4.34.8",
     "semver": "7.7.1",
     "sherif": "1.3.0",
     "std-env": "3.8.0",
     "tinyexec": "0.3.2",
-    "tinyglobby": "0.2.10",
+    "tinyglobby": "0.2.11",
     "ts-blank-space": "0.6.0",
     "typescript": "5.7.3",
     "ufo": "1.5.4",
@@ -133,9 +133,9 @@
     "vitest": "3.0.5",
     "vitest-environment-nuxt": "1.0.1",
     "vue": "3.5.13",
-    "vue-tsc": "2.2.0",
+    "vue-tsc": "2.2.2",
     "webpack": "5.98.0"
   },
-  "packageManager": "pnpm@10.3.0",
+  "packageManager": "pnpm@10.4.1",
   "version": ""
 }

packages/kit/package.json

@@ -45,7 +45,7 @@
     "std-env": "^3.8.0",
     "ufo": "^1.5.4",
     "unctx": "^2.4.1",
-    "unimport": "^4.1.1",
+    "unimport": "^4.1.2",
     "untyped": "^1.5.2"
   },
   "devDependencies": {

packages/nuxt/package.json

@@ -66,15 +66,15 @@
   "dependencies": {
     "@nuxt/cli": "^3.21.1",
     "@nuxt/devalue": "^2.0.2",
-    "@nuxt/devtools": "^2.0.0",
+    "@nuxt/devtools": "^2.1.0",
     "@nuxt/kit": "workspace:*",
     "@nuxt/schema": "workspace:*",
     "@nuxt/telemetry": "^2.6.5",
     "@nuxt/vite-builder": "workspace:*",
-    "@unhead/dom": "^1.11.18",
-    "@unhead/shared": "^1.11.18",
-    "@unhead/ssr": "^1.11.18",
-    "@unhead/vue": "^1.11.18",
+    "@unhead/dom": "^1.11.19",
+    "@unhead/shared": "^1.11.19",
+    "@unhead/ssr": "^1.11.19",
+    "@unhead/vue": "^1.11.19",
     "@vue/shared": "^3.5.13",
     "acorn": "8.14.0",
     "c12": "^2.0.2",
@@ -113,14 +113,14 @@
     "semver": "^7.7.1",
     "std-env": "^3.8.0",
     "strip-literal": "^3.0.0",
-    "tinyglobby": "0.2.10",
+    "tinyglobby": "0.2.11",
     "ufo": "^1.5.4",
     "ultrahtml": "^1.5.3",
     "uncrypto": "^0.1.3",
     "unctx": "^2.4.1",
     "unenv": "^1.10.0",
-    "unhead": "^1.11.18",
-    "unimport": "^4.1.1",
+    "unhead": "^1.11.19",
+    "unimport": "^4.1.2",
     "unplugin": "^2.2.0",
     "unplugin-vue-router": "^0.11.2",
     "unstorage": "^1.14.4",
@@ -131,7 +131,7 @@
     "vue-router": "^4.5.0"
   },
   "devDependencies": {
-    "@nuxt/scripts": "0.10.1",
+    "@nuxt/scripts": "0.10.3",
     "@parcel/watcher": "2.5.1",
     "@types/estree": "1.0.6",
     "@vitejs/plugin-vue": "5.2.1",

packages/nuxt/src/app/components/nuxt-island.ts

@@ -75,6 +75,14 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    /**
+     * use the NuxtIslandResponse which has been cached if available
+     * @default true
+     */
+    useCache: {
+      type: Boolean,
+      default: true,
+    },
   },
   emits: ['error'],
   async setup (props, { slots, expose, emit }) {
@@ -248,13 +256,13 @@ export default defineComponent({
     }
 
     if (import.meta.client) {
-      watch(props, debounce(() => fetchComponent(), 100), { deep: true })
+      watch(props, debounce(() => fetchComponent(!props.useCache), 100), { deep: true })
     }
 
     if (import.meta.client && !instance.vnode.el && props.lazy) {
-      fetchComponent()
+      fetchComponent(!instance.vnode.el && !props.useCache)
     } else if (import.meta.server || !instance.vnode.el || !nuxtApp.payload.serverRendered) {
-      await fetchComponent()
+      await fetchComponent(!instance.vnode.el && !props.useCache)
     } else if (selectiveClient && canLoadClientComponent.value) {
       await loadComponents(props.source, payloads.components)
     }

packages/nuxt/src/components/runtime/server-component.ts

@@ -8,7 +8,7 @@ export const createServerComponent = (name: string) => {
   return defineComponent({
     name,
     inheritAttrs: false,
-    props: { lazy: Boolean },
+    props: { lazy: Boolean, useCache: { type: Boolean, default: true } },
     emits: ['error'],
     setup (props, { attrs, slots, expose, emit }) {
       const vm = getCurrentInstance()
@@ -22,6 +22,7 @@ export const createServerComponent = (name: string) => {
         return h(NuxtIsland, {
           name,
           lazy: props.lazy,
+          useCache: props.useCache,
           props: attrs,
           scopeId: vm?.vnode.scopeId,
           ref: islandRef,
@@ -40,7 +41,7 @@ export const createIslandPage = (name: string) => {
     name,
     inheritAttrs: false,
     props: { lazy: Boolean },
-    async setup (props, { slots, expose }) {
+    async setup(props, { slots, expose }) {
       const islandRef = ref<null | typeof NuxtIsland>(null)
 
       expose({

packages/rspack/package.json

@@ -75,7 +75,7 @@
     "@types/pify": "5.0.4",
     "@types/webpack-bundle-analyzer": "4.7.0",
     "@types/webpack-hot-middleware": "2.25.9",
-    "rollup": "4.34.6",
+    "rollup": "4.34.8",
     "unbuild": "3.3.1",
     "vue": "3.5.13"
   },

packages/schema/package.json

@@ -40,12 +40,12 @@
     "@types/rollup-plugin-visualizer": "4.2.4",
     "@types/webpack-bundle-analyzer": "4.7.0",
     "@types/webpack-hot-middleware": "2.25.9",
-    "@unhead/schema": "1.11.18",
+    "@unhead/schema": "1.11.19",
     "@vitejs/plugin-vue": "5.2.1",
     "@vitejs/plugin-vue-jsx": "4.1.1",
     "@vue/compiler-core": "3.5.13",
     "@vue/compiler-sfc": "3.5.13",
-    "@vue/language-core": "2.2.0",
+    "@vue/language-core": "2.2.2",
     "c12": "2.0.2",
     "chokidar": "4.0.3",
     "compatx": "0.1.8",
@@ -61,11 +61,11 @@
     "ofetch": "1.4.1",
     "pkg-types": "1.3.1",
     "postcss": "8.5.2",
-    "sass-loader": "16.0.4",
+    "sass-loader": "16.0.5",
     "scule": "1.3.0",
     "unbuild": "3.3.1",
     "unctx": "2.4.1",
-    "unimport": "4.1.1",
+    "unimport": "4.1.2",
     "untyped": "1.5.2",
     "vite": "6.1.0",
     "vue": "3.5.13",

packages/ui-templates/package.json

@@ -17,9 +17,9 @@
     "prerender": "pnpm build && jiti ./lib/prerender"
   },
   "devDependencies": {
-    "@unocss/reset": "65.4.3",
+    "@unocss/reset": "66.0.0",
     "beasties": "0.2.0",
-    "html-validate": "9.2.2",
+    "html-validate": "9.3.0",
     "htmlnano": "2.1.1",
     "jiti": "2.4.2",
     "knitwork": "1.2.0",
@@ -28,8 +28,8 @@
     "scule": "1.3.0",
     "svgo": "3.3.2",
     "tinyexec": "0.3.2",
-    "tinyglobby": "0.2.10",
-    "unocss": "65.4.3",
+    "tinyglobby": "0.2.11",
+    "unocss": "66.0.0",
     "vite": "6.1.0"
   }
 }

packages/vite/package.json

@@ -26,7 +26,7 @@
   },
   "devDependencies": {
     "@nuxt/schema": "workspace:*",
-    "rollup": "4.34.6",
+    "rollup": "4.34.8",
     "unbuild": "3.3.1",
     "vue": "3.5.13"
   },

packages/webpack/package.json

@@ -77,7 +77,7 @@
     "@types/pify": "5.0.4",
     "@types/webpack-bundle-analyzer": "4.7.0",
     "@types/webpack-hot-middleware": "2.25.9",
-    "rollup": "4.34.6",
+    "rollup": "4.34.8",
     "unbuild": "3.3.1",
     "vue": "3.5.13"
   },

test/nuxt/nuxt-island.test.ts

@@ -1,5 +1,4 @@
-import { beforeEach } from 'node:test'
-import { describe, expect, it, vi } from 'vitest'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { defineComponent, h, nextTick, popScopeId, pushScopeId } from 'vue'
 import { mountSuspended } from '@nuxt/test-utils/runtime'
 import { createServerComponent } from '../../packages/nuxt/src/components/runtime/server-component'
@@ -34,6 +33,11 @@ function expectNoConsoleIssue () {
 beforeEach(() => {
   consoleError.mockClear()
   consoleWarn.mockClear()
+  useNuxtApp().payload.data = {}
+})
+
+afterEach(() => {
+  if (vi.isMockFunction(fetch)) { vi.mocked(fetch).mockReset() }
 })
 
 describe('runtime server component', () => {
@@ -135,6 +139,22 @@ describe('runtime server component', () => {
   })
 
   it('expect NuxtIsland to have parent scopeId', async () => {
+    const stubFetch = vi.fn(() => {
+      return {
+        id: '1234',
+        html: `<div data-island-uid>hello<div data-island-uid="not-to-be-replaced" data-island-component="r"></div></div>`,
+        head: {
+          link: [],
+          style: [],
+        },
+        json () {
+          return this
+        },
+      }
+    })
+
+    vi.stubGlobal('fetch', stubFetch)
+
     const wrapper = await mountSuspended(defineComponent({
       render () {
         pushScopeId('data-v-654e2b21')
@@ -330,6 +350,63 @@ describe('client components', () => {
       <!--teleport end-->"
     `)
 
+    vi.mocked(fetch).mockReset()
     expectNoConsoleIssue()
   })
 })
+
+describe('reuse paylaod', () => {
+  let count = 0
+
+  const stubFetch = () => {
+    count++
+    return {
+      id: '123',
+      html: `<div>${count.toString()}</div>`,
+      state: {},
+      head: {
+        link: [],
+        style: [],
+      },
+      json () {
+        return this
+      },
+    }
+  }
+
+  beforeEach(() => {
+    count = 0
+    vi.mocked(fetch).mockReset()
+    vi.stubGlobal('fetch', vi.fn(stubFetch))
+  })
+  it('expect payload to be reused', async () => {
+    const component1 = await mountSuspended(createServerComponent('reuseCache'))
+    expect(fetch).toHaveBeenCalledOnce()
+    expect(component1.html()).toBe('<div>1</div>')
+    await component1.unmount()
+    expect(fetch).toHaveBeenCalledOnce()
+    const component2 = await mountSuspended(createServerComponent('reuseCache'))
+    expect(component2.html()).toBe('<div>1</div>')
+  })
+  it('expect to re-fetch the island', async () => {
+    const component = await mountSuspended(createServerComponent('withoutCache'), {
+      props: {
+        useCache: false,
+        onError (e) {
+          console.log(e)
+        },
+      },
+    })
+    await nextTick()
+    expect(fetch).toHaveBeenCalledOnce()
+    expect(component.html()).toBe('<div>1</div>')
+    await component.unmount()
+    const component2 = await mountSuspended(createServerComponent('withoutCache'), {
+      props: {
+        useCache: false,
+      },
+    })
+    expect(fetch).toHaveBeenCalledTimes(2)
+    expect(component2.html()).toBe('<div>2</div>')
+  })
+})