useRequestHeaders and useFetch are incompatible in 3.8.0

[Ingramz]

Environment

---

• Operating System: Linux
• Node Version: v18.18.0
• Nuxt Version: 3.8.0
• CLI Version: 3.9.1
• Nitro Version: 2.7.0
• Package Manager: npm@9.4.2
• Builder: -
• User Config: devtools
• Runtime Modules: -
• Build Modules: -

---

Reproduction

https://stackblitz.com/edit/github-mgk9r8

Describe the bug

#23462 introduced headers option value as one of the hash components for useFetch requests. This however broke the example of supplying headers: useRequestHeaders() as shown in docs, because on server side and client side the supplied value are different (on client side it will always return an empty object). This results in a cache miss and triggers a re-fetch data being null on hydration.

Additional context

No response

Logs

No response

[stackblitz]

Start a new pull request in StackBlitz Codeflow.

• github-mgk9r8 (Open reproduction)

[sisou]

Just hit this too and found that the opts.headers is part of the key hash, which is different between server and client when using cookie forwarding.

A workaround is to supply your own unique key in the useFetch options (or to use useAsyncData, even works without specifying the key manually as the first argument).