diff --git a/packages/nuxt/src/app/components/nuxt-island.ts b/packages/nuxt/src/app/components/nuxt-island.ts
index d3a077520f..4288fdaece 100644
--- a/packages/nuxt/src/app/components/nuxt-island.ts
+++ b/packages/nuxt/src/app/components/nuxt-island.ts
@@ -16,6 +16,9 @@ const UID_ATTR = /nuxt-ssr-component-uid(="([^"]*)")?/
 const SLOTNAME_RE = /nuxt-ssr-slot-name="([^"]*)"/g
 const SLOT_FALLBACK_RE = /<div nuxt-slot-fallback-start="([^"]*)"[^>]*><\/div>(((?!<div nuxt-slot-fallback-end[^>]*>)[\s\S])*)<div nuxt-slot-fallback-end[^>]*><\/div>/g
 
+let id = 0
+const getId = process.client ? () => (id++).toString() : randomUUID
+
 export default defineComponent({
   name: 'NuxtIsland',
   props: {
@@ -56,7 +59,7 @@ export default defineComponent({
       })
     })
     function setUid () {
-      uid.value = ssrHTML.value.match(SSR_UID_RE)?.[1] ?? randomUUID() as string
+      uid.value = ssrHTML.value.match(SSR_UID_RE)?.[1] ?? getId() as string
     }
     const cHead = ref<Record<'link' | 'style', Array<Record<string, string>>>>({ link: [], style: [] })
     useHead(cHead)
@@ -90,7 +93,7 @@ export default defineComponent({
       cHead.value.link = res.head.link
       cHead.value.style = res.head.style
       ssrHTML.value = res.html.replace(UID_ATTR, () => {
-        return `nuxt-ssr-component-uid="${randomUUID()}"`
+        return `nuxt-ssr-component-uid="${getId()}"`
       })
       key.value++
       if (process.client) {
diff --git a/packages/nuxt/src/components/runtime/server-component.ts b/packages/nuxt/src/components/runtime/server-component.ts
index cd48972051..d8db0cc5cf 100644
--- a/packages/nuxt/src/components/runtime/server-component.ts
+++ b/packages/nuxt/src/components/runtime/server-component.ts
@@ -17,6 +17,9 @@ const SLOTNAME_RE = /nuxt-ssr-slot-name="([^"]*)"/g
 const SLOT_FALLBACK_RE = /<div nuxt-slot-fallback-start="([^"]*)"[^>]*><\/div>(((?!<div nuxt-slot-fallback-end[^>]*>)[\s\S])*)<div nuxt-slot-fallback-end[^>]*><\/div>/g
 const SSR_UID_RE = /nuxt-ssr-component-uid="([^"]*)"/
 
+let id = 0
+const getId = process.client ? () => (id++).toString() : randomUUID
+
 export const createServerComponent = (name: string) => {
   return defineComponent({
     name,
@@ -48,7 +51,7 @@ const NuxtServerComponent = defineComponent({
   },
   async setup (props, { slots }) {
     const instance = getCurrentInstance()!
-    const uid = ref(getFragmentHTML(instance.vnode?.el)[0]?.match(SSR_UID_RE)?.[1] ?? randomUUID())
+    const uid = ref(getFragmentHTML(instance.vnode?.el)[0]?.match(SSR_UID_RE)?.[1] ?? getId())
 
     const nuxtApp = useNuxtApp()
     const mounted = ref(false)
@@ -125,7 +128,7 @@ const NuxtServerComponent = defineComponent({
     const html = computed(() => {
       const currentSlots = Object.keys(slots)
       return res.data.value!.html
-        .replace(UID_ATTR, () => `nuxt-ssr-component-uid="${randomUUID()}"`)
+        .replace(UID_ATTR, () => `nuxt-ssr-component-uid="${getId()}"`)
         .replace(SLOT_FALLBACK_RE, (full, slotName, content) => {
         // remove fallback to insert slots
           if (currentSlots.includes(slotName)) {
@@ -135,7 +138,7 @@ const NuxtServerComponent = defineComponent({
         })
     })
     function setUid () {
-      uid.value = html.value.match(SSR_UID_RE)?.[1] ?? randomUUID() as string
+      uid.value = html.value.match(SSR_UID_RE)?.[1] ?? getId() as string
     }
 
     await res