Nuxt.js static generate in SPA mode results in same output with loading component inside

0
votes

I created a fresh new app with "npx create-nuxt-app my-app" and picked all default options except of setting the mode to SPA.

I ran npm run generate and expected the dist/*.html files to include rendered content of my pages/*.vue, but all generated HTML contains instead:

  ...
  <div id="nuxt-loading" aria-live="polite" role="status">
    <div>Loading...</div>
  </div>
  ...

Where I'd expect to get content from file, given boilerplate index.vue, index.html should contain HTML of Vue welcome message.

Are my expectation wrong? I want to take advantage of static generation for performance and SEO reason. All my pages are static.

1
nuxt.js

1 Answers

0
votes

Answering my own question: It's the expected behavior.

Apparently I should pick "universal" mode for this scenario, that will still act as SPA later on.

The part that led me into confusion was the description of "universal" mode as "server side rendering". Is serving static generated files a server rendering - apparently yes.

I fixated myself on thinking that "server rendering" requires actual rendering of that HTML, and that's not what I wanted. I wanted statically generated files that will be a SPA later on.

If you look from the browser perspective any HTML will be server rendered no matter if it's node.js freshly render stuff, or a static HTML file generated a year ago.

Still the SSR and static generating are often described as separated approach, what also falsely suggest that "static generating" is not SSR. Where in this context it is.