NUXT - SSR - components are not being rendered server side

Question

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>

Answer 1

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>