Why doesn't my nuxt static site serve the static html files found in the Dist folder?

Question

I've created a blog with Nuxt that has dynamic routes for each of my articles (articles/_slug.vue) . Inside the _slug.vue file I grab markup content from a strapi CMS using asyncData.

aricles/_slug.vue

After running nuxt generate followed by nuxt start and navigating to an article page in my browser, when I open the page source I find that there are numerous Js files being imported /_nuxt/{randomNumbers}.js and a single div with an id __nuxt , most likely resembling an SPA format.

page source of an article

This does not occur with my index.vue page as when I view the page source for index.vue all my content is in the HTML.

Its important that the google crawler is able to index the content on my article pages, so the page source not containing the blog content is not ideal.

What I don't understand is that when I open the dist folder generated by nuxt I find all my articles in subfolders containing HTML files hard coded with my blog content. So I am wondering why isn't nuxt serving these HTML files, and is there a way to do so?

distFolder

Answer 1

As far as I know all pages and components go in one component called Nuxt and I think the "__nuxt" element is that. By the way using asyncData and 'nuxt generate' won't make your app server-side dynamic because 'nuxt generate' generates a static site and while using 'nuxt generate' all asyncData hooks will be called once. For the hard coded blog posts I think you should disable Nuxt Crawler in your nuxt.config.js. Nuxt Docs: The Generate Property #Crawler

export default {
  generate: {
    crawler: false
  }
}

Answer 2

It seems as though after hosting the project on Vercel the static behavior works accordingly. When testing the website locally (nuxt start) the content isn't pre loaded into the page source it continues to act as a SPA on dynamic routes. However after deploying to Vercel the blog content can be found in page source.