vue.jsnuxt.jsnuxt-strapi

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


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


Solution

  • 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.