Merge 0861bdb7ba into edc299a043

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

.github/workflows/ci.yml

@@ -248,7 +248,7 @@ jobs:
           TEST_PAYLOAD: ${{ matrix.payload }}
           SKIP_BUNDLE_SIZE: ${{ github.event_name != 'push' || matrix.env == 'dev' || matrix.builder == 'webpack' || matrix.context == 'default' || matrix.payload == 'js' || runner.os == 'Windows' }}
 
-      - uses: codecov/codecov-action@5c47607acb93fed5485fdbf7232e8a31425f672a # v5.0.2
+      - uses: codecov/codecov-action@985343d70564a82044c1b7fcb84c2fa05405c1a2 # v5.0.4
         if: github.event_name != 'push' && matrix.env == 'built' && matrix.builder == 'vite' && matrix.context == 'default' && matrix.os == 'ubuntu-latest' && matrix.manifest == 'manifest-on'
         with:
           token: ${{ secrets.CODECOV_TOKEN }}

docs/1.getting-started/2.installation.md

@@ -21,8 +21,8 @@ Or follow the steps below to set up a new Nuxt project on your computer.
 <!-- markdownlint-disable-next-line MD001 -->
 #### Prerequisites
 
-- **Node.js** - [`v18.0.0`](https://nodejs.org/en) or newer
-- **Text editor** - We recommend [Visual Studio Code](https://code.visualstudio.com/) with the [official Vue extension](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (previously known as Volar)
+- **Node.js** - [`18.x`](https://nodejs.org/en) or newer (but we recommend the [active LTS release](https://github.com/nodejs/release#release-schedule))
+- **Text editor** - There is no IDE requirement, but we recommend [Visual Studio Code](https://code.visualstudio.com/) with the [official Vue extension](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (previously known as Volar) or [WebStorm](https://www.jetbrains.com/webstorm/), which, along with [other JetBrains IDEs](https://www.jetbrains.com/ides/), offers great Nuxt support right out-of-the-box.
 - **Terminal** - In order to run Nuxt commands
 
 ::note

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

@@ -91,7 +91,7 @@
     "devalue": "5.1.1",
     "eslint": "9.15.0",
     "eslint-plugin-no-only-tests": "3.3.0",
-    "eslint-plugin-perfectionist": "4.0.2",
+    "eslint-plugin-perfectionist": "4.0.3",
     "eslint-typegen": "0.3.2",
     "h3": "npm:h3-nightly@2.0.0-1718872656.6765a6e",
     "happy-dom": "15.11.6",
@@ -118,7 +118,7 @@
     "vue-router": "4.4.5",
     "vue-tsc": "2.1.10"
   },
-  "packageManager": "pnpm@9.13.2",
+  "packageManager": "pnpm@9.14.1",
   "engines": {
     "node": "^16.10.0 || >=18.0.0"
   },

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

@@ -76,6 +76,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 }) {
@@ -250,13 +258,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({

pnpm-lock.yaml

@@ -114,8 +114,8 @@ importers:
         specifier: 3.3.0
         version: 3.3.0
       eslint-plugin-perfectionist:
-        specifier: 4.0.2
-        version: 4.0.2(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3)
+        specifier: 4.0.3
+        version: 4.0.3(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3)
       eslint-typegen:
         specifier: 0.3.2
         version: 0.3.2(eslint@9.15.0(jiti@2.4.0))
@@ -4373,8 +4373,8 @@ packages:
     resolution: {integrity: sha512-brcKcxGnISN2CcVhXJ/kEQlNa0MEfGRtwKtWA16SkqXHKitaKIMrfemJKLKX1YqDU5C/5JY3PvZXd5jEW04e0Q==}
     engines: {node: '>=5.0.0'}
 
-  eslint-plugin-perfectionist@4.0.2:
-    resolution: {integrity: sha512-zWdgyg2SdHqhp/P9d9vKwo5qD9is28xMAGzBslHqkZz5mVIikjyz1qvuJ4yS7Wrsf4KlbGorORefb4Kbe7Puzg==}
+  eslint-plugin-perfectionist@4.0.3:
+    resolution: {integrity: sha512-CyafnreF6boy4lf1XaF72U8NbkwrfjU/mOf1y6doaDMS9zGXhUU1DSk+ZPf/rVwCf1PL1m+rhHqFs+IcB8kDmA==}
     engines: {node: ^18.0.0 || >=20.0.0}
     peerDependencies:
       eslint: '>=8.0.0'
@@ -11519,7 +11519,7 @@ snapshots:
 
   eslint-plugin-no-only-tests@3.3.0: {}
 
-  eslint-plugin-perfectionist@4.0.2(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3):
+  eslint-plugin-perfectionist@4.0.3(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3):
     dependencies:
       '@typescript-eslint/types': 8.15.0
       '@typescript-eslint/utils': 8.15.0(eslint@9.15.0(jiti@2.4.0))(typescript@5.6.3)

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>')
+  })
+})