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>

i can see from your site something may be wrong in
can you share code of that or same replica here so we can better understand it. — Hardik Satasiya, Dec 07 '17 at 17:46
Have you got any solution to this ? I am also facing the same issue — Suneet Jain, Aug 12 '20 at 10:40

score 1 · Answer 1 · edited May 29 '21 at 14:06

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>

score -2 · Answer 2 · answered Dec 09 '17 at 11:54

-2

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

answered Dec 09 '17 at 11:54

Sergio Marcelino

1,142
8
17

removed the `games: []` form the data, but the returned HTML still doesn't contain the grid – geoctrl Dec 10 '17 at 06:16
4

the docs say: `The result from asyncData will be merged with data.` – geoctrl Dec 11 '17 at 02:34

score -3 · Answer 3 · answered Oct 05 '20 at 10:06

-3

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

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

answered Oct 05 '20 at 10:06

Arif Ikhsanudin

739
6
14

1

Nuxt provides server side rendering. No need to extra deployed node server. – Batuhan May 18 '21 at 14:20

NUXT - SSR - components are not being rendered server side

3 Answers3