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

NUXT – SSR – components are not being rendered server side – SEO

I’m new to Nuxt – converted my vue app to it, and got it working on production: gameslate.io

The app is using the asyncData method to get the list of games – however the full layout isn’t being rendered the server…

If you view the page source you’ll see that Nuxt is putting all of the data in window.__NUXT__, but there’s no grid html.

How do I render the full layout on the server after getting data with asyncData?

Otherwise, google can’t crawl the game lists – this becomes pretty useless for SEO… (checkout twitter’s page source – it loads the entire page including dynamic content)

This is the “home” page component that makes the asyncData call (simplified):

<template>
  <div>things</div>                       <!-- rendered on server -->
  <game-grid :games="games"></game-grid>  <!-- rendered in browser -->
</template>

<script>
  export default {
    data() {
      return {
        games: []
      }
    }
    async asyncData() {
      let games = await getGames(filters);
      return { games };
    }
  }
</script>
Tags:

3

Answers


  1. 0

    You have to remove the data () (returning an empty array) because it’s overriding the asyncData.

    And google can crawl perfectly because the DOM tree is generated if you use asyncData, you can check on view-source:http://localhost:3000

    Login or Signup to reply.
  2. 0

    If you want Server Side Rendering, you should have a node server to deploy the app.

    Source: https://www.youtube.com/watch?v=nngsKhTb2BA

    Login or Signup to reply.
  3. 0

    With Nuxt >= 2.12, you can use the fetch() hook to get & process data before the page renders. It’s leveraged both in back-end and front-end: "…fetch is called on server-side when rendering the route, and on client-side when navigating."

    <template>
  <div>things</div>                       <!-- rendered on server -->
  <game-grid :games="games"></game-grid>  <!-- rendered in browser -->
</template>

<script>
  export default {

    data() {
      return {
        games: []
      }
    }

    async fetch() {

      // Get & process data, in whatever way you prefer
      await myGetFunc(filters).then(response => {

          // Do something with the payload, like set component data...
          this.games = response;
          /// ... or send it to a VueX store:
          this.$store.dispatch('globalResults', response)
        
        }).catch(error => {
          console.log('ERROR: ', error)
        }})

    }


    methods: {

        // ...
    
    },


  }
</script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search