Not working with SSR enabled

[JoniLieh]

Hello and thanks for this awesome package!

I have a problem when ssr is enabled, the webpage takes forever to load and nothing happens.
In the console there is / -> http://localhost:3001/ I think this looks good tho.

I tested it with ssr: false → works, ssr: true → doesn't work. (same goes for ws)

"nuxt": "^3.9.1",
"@nuxt-alt/proxy": "^2.5.6"

proxy: {
    debug: true,
    experimental: {
      listener: true
    },
    proxies: {
      "/api": {
        target: "http://localhost:3001/",
        changeOrigin: true,
        rewrite: (path: string) => path.replace(/^\/api/, '')
      }
    }
  }

[Denoder]

That doesn't really tell me much. There's an event handler that catches errors so if that's not outputting anything I'm not sure I can assist.

[JoniLieh]

Thanks for the reply,
okay I thought I missed something… but even in your playground I'm doing a simple
const { data, pending, error } = await useFetch('/api') and it doesn't load the page in ssr mode anymore (ssr: false works perfect)

[Denoder]

Ah yea there's an issue with useFetch that caused me to make another module because it's a pain to have to try to make it work with the proxy module. This module was originally able to handle $fetch/useFetch but i had long since removed it because it got incompatible after an update and playing cat/mouse with this framework was annoying.

So you have 2 options here:

• To make it work with useFetch you need to set a baseURL for the proxy module to work with it. Cause the request runs so early in the lifecycle that I cant intercept it so the host url ends up either being 'localhost' (yes, just localhost without the port for some reason) or '/' which isn't even a host. devProxy and routeRules works because they're available somewhere this module can't reach so it's a dead end for me. (And I don't want to use those because devProxy only works in dev mode, and routeRules is barebones)

• I made the @nuxt-alt/http module which is basically a layer over $fetch but works more similar to @nuxtjs/axios https://github.com/nuxt-alt/http. As you can see I end up making modules for things that shouldn't be an issue but are, but this one is unrelated the of the first issue. I just made it cause I wanted the interceptor features of axios to work with fetch.

In regards to the websockets which was what you were originally looking for I have yet a third module: https://github.com/nuxt-alt/websocket you can read it and see what I had to do to get things working... The fix is relatively simple in regards to the framework, but because it's been months with no ws support I just threw that together, but ultimately it's not as good as just having ws support in the first place or at least being able to get the server instance from nitro.

[JoniLieh]

Maan that's a lot of headache, thanks for the options. I indeed needed a proxy for websockets since nitro still doesn't include it...
Maybe I'll stick with the long polling feature from socket.io.
Thanks for your work man!

[Denoder]

@JoniLieh can you try using useFetch with the latest update now? It fetches for me now but I'd like a 2nd source.

[JoniLieh]

Thanks for the quick update, unfortunately nothing has changed for me...
ssr: false → working, ssr: true → not working (in nuxt.config.ts)

[julianaputra]

Any updates on this? I'm still having the problem

[JoniLieh]

Any updates on this? I'm still having the problem

Idk I abandoned my websocket proxy idea... mb https://nuxt.com/modules/api-party will help idk if they support ws tho