diff --git a/packages/nuxt/src/app/composables/asyncData.ts b/packages/nuxt/src/app/composables/asyncData.ts
index d38608ef4b..0d15db9692 100644
--- a/packages/nuxt/src/app/composables/asyncData.ts
+++ b/packages/nuxt/src/app/composables/asyncData.ts
@@ -141,7 +141,7 @@ export function useAsyncData<
 
   // Client side
   if (process.client) {
-    if (fetchOnServer && nuxt.isHydrating) {
+    if (fetchOnServer && nuxt.isHydrating && key in nuxt.payload.data) {
       // 1. Hydration (server: true): no fetch
       asyncData.pending.value = false
     } else if (instance && (nuxt.isHydrating || options.lazy)) {
diff --git a/packages/nuxt/src/app/composables/fetch.ts b/packages/nuxt/src/app/composables/fetch.ts
index 4ff5d0d5a9..b994abc44a 100644
--- a/packages/nuxt/src/app/composables/fetch.ts
+++ b/packages/nuxt/src/app/composables/fetch.ts
@@ -28,7 +28,10 @@ export function useFetch<
   request: Ref<ReqT> | ReqT | (() => ReqT),
   opts: UseFetchOptions<_ResT, Transform, PickKeys> = {}
 ) {
-  const key = '$f_' + (opts.key || hash([request, opts]))
+  if (process.dev && opts.transform && !opts.key) {
+    console.warn('[nuxt] You should provide a key for `useFetch` when using a custom transform function.')
+  }
+  const key = '$f_' + (opts.key || hash([request, { ...opts, transform: null }]))
   const _request = computed<FetchRequest>(() => {
     let r = request
     if (typeof r === 'function') {