diff --git a/packages/nuxt/src/app/components/nuxt-island.ts b/packages/nuxt/src/app/components/nuxt-island.ts
index ba2b239305..e2e8c27bea 100644
--- a/packages/nuxt/src/app/components/nuxt-island.ts
+++ b/packages/nuxt/src/app/components/nuxt-island.ts
@@ -69,7 +69,7 @@ export default defineComponent({
     })
 
     async function _fetchComponent () {
-      const key = `${props.name}:${hashId.value}`
+      const key = `${props.name}_${hashId.value}`
       if (nuxtApp.payload.data[key]) { return nuxtApp.payload.data[key] }
 
       const url = `/__nuxt_island/${key}`
diff --git a/packages/nuxt/src/core/runtime/nitro/renderer.ts b/packages/nuxt/src/core/runtime/nitro/renderer.ts
index 1e1b21d1c4..a72c1e520a 100644
--- a/packages/nuxt/src/core/runtime/nitro/renderer.ts
+++ b/packages/nuxt/src/core/runtime/nitro/renderer.ts
@@ -145,7 +145,7 @@ const getSPARenderer = lazyCachedFunction(async () => {
 async function getIslandContext (event: H3Event): Promise<NuxtIslandContext> {
   // TODO: Strict validation for url
   const url = event.node.req.url?.substring('/__nuxt_island'.length + 1) || ''
-  const [componentName, hashId] = url.split('?')[0].split(':')
+  const [componentName, hashId] = url.split('?')[0].split('_')
 
   // TODO: Validate context
   const context = event.node.req.method === 'GET' ? getQuery(event) : await readBody(event)
@@ -363,7 +363,7 @@ export default defineRenderHandler(async (event): Promise<Partial<RenderResponse
       }
     }
     if (process.env.prerender) {
-      ISLAND_CACHE!.set(`/__nuxt_island/${islandContext!.name}:${islandContext!.id}`, response)
+      ISLAND_CACHE!.set(`/__nuxt_island/${islandContext!.name}_${islandContext!.id}`, response)
     }
     return response
   }