0

Really appreciate if anyone can tell me what is causing this error

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.
PirateApp
  • 5,433
  • 4
  • 57
  • 90
  • Hi, what did you tried so far? There is a lot of ideas on where to find the issue. Commenting and toggling some block may help. – kissu Sep 05 '21 at 09:24
  • @kissu only thing I tried so far is client-only block and it works but my question is why is it doing that? is this a buefy specific thing, without client-only why wont it work – PirateApp Sep 05 '21 at 10:11
  • 2
    My answer there gives examples and link to an article explaining it from the ground up. – kissu Sep 05 '21 at 10:25
  • Does this answer your question? [Vuejs Error: The client-side rendered virtual DOM tree is not matching server-rendered](https://stackoverflow.com/questions/47862591/vuejs-error-the-client-side-rendered-virtual-dom-tree-is-not-matching-server-re) – kissu Sep 05 '21 at 17:33

1 Answers1

1

Well, the reason for The client-side rendered virtual DOM tree is not matching server-rendered content is probably the use of randomness - more specifically the usage of getRandomString function in the NewsList.vue component to generate unique ID's

As @kissu pointed out in his answer

any random is risky

new Date() inside NewsListItem.vue will cause problem too as the resuting Date object will be different on server and the client causing client side VDom difference from the HTML generated by server...

Michal Levý
  • 33,064
  • 4
  • 68
  • 86