[728] mismatch server-rendered content when filling the store in the nuxtServerInit

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
  }
}