diff --git a/packages/nuxt/src/app/composables/ssr.ts b/packages/nuxt/src/app/composables/ssr.ts
index 5f8c5e4d8f..35df8dc628 100644
--- a/packages/nuxt/src/app/composables/ssr.ts
+++ b/packages/nuxt/src/app/composables/ssr.ts
@@ -1,6 +1,6 @@
 import type { H3Event } from 'h3'
 import { setResponseStatus as _setResponseStatus, appendHeader, getRequestHeader, getRequestHeaders, getResponseHeader, removeResponseHeader, setResponseHeader } from 'h3'
-import { computed, getCurrentInstance } from 'vue'
+import { computed, getCurrentInstance, ref } from 'vue'
 import { useServerHead } from '@unhead/vue'
 
 import type { NuxtApp } from '../nuxt'
@@ -63,10 +63,26 @@ export function setResponseStatus (arg1: H3Event | number | undefined, arg2?: nu
 
 /** @since 3.14.0 */
 export function useResponseHeader (header: string) {
-  if (import.meta.client) { return {} }
+  if (import.meta.client) {
+    if (import.meta.dev) {
+      return computed({
+        get: () => undefined,
+        set: () => console.warn('[nuxt] Setting response headers is not supported in the browser.'),
+      })
+    }
+    return ref()
+  }
 
   const event = useRequestEvent()
-  if (!event) { return {} }
+  if (!event) {
+    if (import.meta.dev) {
+      return computed({
+        get: () => undefined,
+        set: () => console.warn('[nuxt] Setting response headers is not supported in the browser.'),
+      })
+    }
+    return ref()
+  }
 
   return computed({
     get () {
diff --git a/test/nuxt/composables.test.ts b/test/nuxt/composables.test.ts
index def0b5de84..1e56ce4902 100644
--- a/test/nuxt/composables.test.ts
+++ b/test/nuxt/composables.test.ts
@@ -395,7 +395,7 @@ describe('ssr composables', () => {
     expect(useRequestFetch()).toEqual($fetch)
     expect(useRequestHeaders()).toEqual({})
     expect(prerenderRoutes('/')).toBeUndefined()
-    expect(useResponseHeader()).toEqual({})
+    expect(useResponseHeader('x-test').value).toBeUndefined()
   })
 })