Home

Hello,

I’m trying to prefetch the data on the server side to fill my store. I’m getting the data in the store, but my component won’t render and I get a hydration warning.

Have any one a solution for this?
And why the hydration fails, when I filling the store on the server side?

[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.

store/index.js

export const actions = {
  async nuxtServerInit ({dispatch}) {
    await dispatch('pages/init')
  }
}

store/pages.js

import request from 'superagent'
import Config from '~/config'

const API_URL = Config.API_URL
const NAMESPACE = 'wp/v2'
const ROUTE = 'pages'

export const state = {
  items: []
}

export const getters = {
  items: state => state.items,
  getById: state => (id) => state.items.find(item => item.id === id)
}

export const actions = {
  init ({commit}) {
    return request
      .get(`${API_URL}/wp-json/${NAMESPACE}/${ROUTE}`)
      .then(res => {
        commit('setItems', res.body)
        return res.body
      })
  }
}

export const mutations = {
  setItems (state, items) {
    state.items = items
  }
}