seo Question posted in
Some basic information to get you started with this can be found here.

How to show full HTML in Nuxt JS dynamic pages? – SEO

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:

enter image description here

view source like this:

view source shows javascript

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 }
  },
Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

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


  2. 0

    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

    Login or Signup to reply.
  3. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search