Why does `fetch('/api/profile')` gives "Invalid URL" when `$fetch('/api/profile')` works just fine?
I am using a the Hono client RPC framework to use this. Behind the fetch, hono uses the default
fetch API which results in an error "Invalid URL". So I configured the client to use $fetch instead. However, I no longer have the type safety that hono provides. Why can't the normal fetch work when the Nuxt is rendering the page in the server??
3 Replies
Hi @NightFuries. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
The issue you're experiencing is related to how Nuxt handles server-side rendering and API requests. Let me explain why this happens and provide some context:
1. The regular
fetch function doesn't work as expected during server-side rendering because it doesn't have the full URL context. When Nuxt is rendering the page on the server, it doesn't know the host information, which is why you get the "Invalid URL" error Github Issue (https://github.com/nuxt/nuxt/issues/29626).
2. Nuxt provides the $fetch utility specifically to handle this scenario. $fetch is a wrapper around the regular fetch API that's aware of the Nuxt server context Nuxt Docs - $fetch (https://nuxt.com/docs/api/utils/dollarfetch).
3. During server-side rendering, $fetch can make internal API calls directly without needing the full URL, which is why it works in your case Nuxt Docs - $fetch (https://nuxt.com/docs/api/utils/dollarfetch).
4. It's important to note that you shouldn't override the default $fetch handler, as it's not supported and can lead to issues Github Issue (https://github.com/nuxt/nuxt/issues/29626).
To address your concern about losing type safety when using $fetch instead of the Hono client:
1. Nuxt actually provides typed API routes when you're using $fetch or useFetch, as long as you're returning a value instead of using res.end() to send a response Nuxt Docs - Typed API Routes (https://nuxt.com/docs/guide/concepts/server-engine#typed-api-routes).
2. If you need to maintain the Hono client's type safety while working with Nuxt's server-side rendering, you might want to consider creating a custom fetcher that uses $fetch internally but maintains Hono's typing. The Nuxt documentation provides guidance on creating custom fetchers Nuxt Docs - Custom useFetch (https://nuxt.com/docs/guide/recipes/custom-usefetch).
In summary, the regular fetch doesn't work during server-side rendering due to the lack of host information, while $fetch is designed to handle this scenario in the Nuxt environment. To maintain type safety, consider exploring Nuxt's typed API routes or creating a custom fetcher that combines Hono's typing with Nuxt's $fetch functionality.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@711113525023735809> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
This AI is actually amazing.