How to show full HTML in Nuxt JS dynamic pages?

Question

I have a Nuxt JS website with dynamic pages, and the data come from RESTful API.

When i visit the page, it show circle loading screen, and then load the content.

I build this using nuxt generate command.

loading screen:

view source like this:

that view source shows loading indicator.

How to make it skip loading and contain result of HTML only? I am doing this for SEO purposes

my asyncData:

  async asyncData({ $axios, route }) {
    const response = await $axios.$get('/v1/items/' + route.params.slug)
    const coverImage = response.data.images.find((e) => e.cover)

    return { item: response.data, coverImage }
  },

Answer 1

I find the solution here https://www.youtube.com/watch?v=nngsKhTb2BA

I need to have a node server running. So that my site will be generated on the server side (SSR).

Answer 2

Running nuxt generate will statically generate your site. However, if you haven't fetched the content at render time, you'll just be statically generating an empty HTML page that fetches content in the browser. You need to do the data fetching during your build step.

How do you do this? By using the nuxt generate property. You'll be using this instead of the asyncData property you're using now. A very similar example to the one your presenting is available in the docs here: https://nuxtjs.org/guides/configuration-glossary/configuration-generate#routes

Answer 3

Set mode to universal in nuxt.config.js. It's generating as single page application(SPA).

If it's generated page then data that came from API won't show up there in static html files. You need to serve nuxt.js app as SSR with node backend.

//nuxt.config.js
{
  //.....other config

  mode: "universal"
}

More: https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-mode