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

It seems like it is falling back to the SPA version. What are you using to serve your files? Sometimes you need to configure your service to get the routing right. — Florian Pallas

bar5um bar5um · Accepted Answer · 2021-02-24T17:25:19

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
  }
}

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

2 Answers