Suspense #fallback not work in defineOptions preFetch in ssr mode

[fengjac]

Vue version

3.4.21

Link to minimal reproduction

https://github.com/fengjac/ssr-suspense-demo

Steps to reproduce

1. $ pnpm i
2. $ pnpm run dev
3. click About nav in http://localhost:9100/

What is expected?

Show Loading... label (loading state) when I click About nav. And then after the API call done, show About page

What is actually happening?

No loading state when I click About nav

System Info

System:
    OS: Windows 10 10.0.19041
    CPU: (8) x64 Intel(R) Core(TM) i7-7820HQ CPU @ 2.90GHz  
    Memory: 6.07 GB / 15.82 GB
  Binaries:
    Node: 20.12.1 - D:\nodejs\node.EXE
    Yarn: 1.22.22 - D:\nodejs\yarn.CMD
    npm: 10.5.0 - D:\nodejs\npm.CMD
    pnpm: 8.15.6 - D:\nodejs\pnpm.CMD
  Browsers:
    Chrome: 90.0.4430.212
    Edge: Spartan (44.19041.964.0), Chromium (123.0.2420.81)
    Internet Explorer: 11.0.19041.1
  npmPackages:
    vue: ^3.4.18 => 3.4.21

Any additional comments?

No response

[quiteeasy]

preFetch is handled by the Quasar framework internally, it is not a part of Vue. It seems that components with preFetch are not converted to async components by Quasar and Suspense works only with async components or async setup function according to docs

You should use Quasar's loading state instead. Suspense works well in this scenario if we make the component async as stated in Vue docs, for instance, if we add await sleep(2000) in the AboutPage body we will see the loader for 2 seconds after the component has been fetched.

Probably, it is a feature request to Quasar's team to make their components with preFetch work with Suspense

Please, correct me if I am wrong this is an issue related to Vue and further investigation is required.

[yyx990803]

Thanks @quiteeasy for looking into it. Closing as it doesn't seem to be caused by Vue core.