Home

Hello ! on my site (https://yineo.fr/), my right sidebar is a component called from layouts/default.vue

Because i don’t want to call it in every page component.

I know asyncData() is only for pages and not layouts but maybe they are some workarounds ?

So my sidebar with last articles is not server side rendered and google bot can not see it ( see picture below, the left one is what google bot see and probably index )

How can i have server side rendering for my “Sidebar” Component called from layouts/default.vue ( code below the picture ) ?
thanks !

<!-- main layout -->
<template>
  <div>
    <AppNavigation />
    <AppHeader/>
  
    <div class="container">
      <div class="columns">
  
        <div class="column is-two-thirds">
          <nuxt/>
        </div>
  
        <div class="column">
          <section class="section">
            <TwitterFollowMe/>
            <hr/>
            <h2 class="title is-2">Derniers billets</h2>
            <PostsSidebar :posts="posts" />
          </section>
        </div>
  
      </div>
    </div>
    <AppFooter />
  </div>
</template>

<script>
import AppHeader from '~/components/AppHeader'
import AppNavigation from '~/components/AppNavigation'
import AppFooter from '~/components/AppFooter'
import TwitterFollowMe from '~/components/TwitterFollowMe'
import PostsSidebar from '~/components/PostsSidebar'
import { getPosts } from '~/services/wpContentApi'

export default {
  components: { AppHeader, AppNavigation, AppFooter, TwitterFollowMe, PostsSidebar },
  data () {
    return {
      posts: []
    }
  },
  async created () {
    this.posts = await getPosts(20)
  }
}
</script>