Nuxt.js: Generating static html always renders loading state when nuxt mode is SPA

[elmccd]

Version

v2.12.2

Reproduction link

http://couldnt-reproduce-online

Steps to reproduce

Create a new app with "npx create-nuxt-app my-app"
Pick all default options, except of SPA mode question. Select SPA.
Enter project and run: "npm run generate"

What is expected ?

Generated dist/index.html file should contain HTML for vue welcome screen including "My transcendent Nuxt.js project".

What is actually happening?

Generated HTML has a loading component instead of actual HTML:

Loading...

Additional comments?

After changing mode to universal and running "npm run generate" HTML content contains actual pages HTML as expected.

When generating HTML for multiple static pages, all of them have the same content with loading element.

_{This bug report is available on Nuxt community (#c10716)}

[danielroe]

@elmccd This is the intended behaviour as a SPA is rendered on client side only. If you select universal mode, and then generate, the initial page will be fully rendered and from that point the app will behave like a SPA, which sounds like what you want.

More here.

[elmccd]

@danielroe
Ok, so I as understand using npm run generate with mode SPA will generate those files to replace URL rewrites on backend to index.html.
That makes sense, but probably user will need those rewrites anyway for any dynamic routes.

What really confuses me is that if I want use static pregenerated sites that will act as SPA on the client side, all being 100% static, without any SSR done in production then I have to pick "universal" mode which claims to create "Isomorphic application (server-side rendering + client-side navigation)"

Having the above stated in the doc, or having this setup as additional mode would made it more obvious:

Quoting https://nuxtjs.org/api/configuration-mode

'spa': No server-side rendering (only client-side navigation)
'universal': Isomorphic application (server-side rendering + client-side navigation)
'static-spa': No server side rendering, (generated static pages + client-side navigation)

Or having npm run generate with mode spa act as it acts now with universal mode.
Current npm run generate in spa mode makes little sense IMO.

//edit
Now I see that I thought about "server-side rendering" as some runtime, where generated static pages are still server-side render.
Maybe it makes sense after all :)

[danielroe]

@elmccd Documentation pull requests are welcome at https://github.com/nuxt/docs/ 🙂

(In case you're wondering, a key benefit of generating in SPA mode (if fully-rendered pages don't suit your needs) is that instead of loading a white screen and then waiting until hydration for a loader, you get the loader instantly, which is a better user experience.)

[elmccd]

@danielroe I will try to word it and submit a PR :)

Indeed, still an index.html with the loader and correct URL rewrites (if possible in given environment) would work the same, right? And that would avoid us multiple files with identical content.

Thanks for explaining, from my end all clear here :)

[stale[bot]]

Thanks for your contribution to Nuxt.js!
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you would like this issue to remain open:

1. Verify that you can still reproduce the issue in the latest version of nuxt-edge
2. Comment the steps to reproduce it

Issues that are labeled as pending will not be automatically marked as stale.