[ERROR] The client-side rendered virtual DOM tree is not matching server-rendered content.

---

nuxt앱을 만드는 중에 발생한 에러다.

어려운 작업은 아니었으나 중요해보여서 기록.

---

상황

 

반응형 웹으로 전환하는 도중에 

Mismatching childNodes vs. VNodes: -

[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content ( Nuxt / Vue / lerna monorepo )

라는 에러가 떴다.

 

출처: https://camo.githubusercontent.com/a2f473a829199d344bbd2918e234ac6dd8f16fd42f01c37f866fb2188b093942/68747470733a2f2f636d74792e73332e65752d776573742d312e616d617a6f6e6177732e636f6d2f39383534333935382f39323864393539302d383466302d313165382d393237632d3831366436653734633237622e4a5047

---

해결

 

원인은 v-if가 아닌 v-show로 적어야 할 것을 잘못 적은 것.

둘이 별로 에러를 낼 만큼 사용에 차이가 없을 줄 알았는데, 이유는 찾지 못했다.

 

// 문제
<v-row v-if="$vuetify.breakpoint.mdAndUp"></v-row>
// 해결책
<v-row v-show="$vuetify.breakpoint.mdAndUp"></v-row>

 

정확한 이유를 찾지는 못했기에

v-if else의 사용이 필수불가결하다면 v-if를 사용하고,

화면의 hide show만 결정해주면 된다 하면 v-show를 쓰는게 안정적일 것 같다.

 

---

아이디어를 얻은 곳:

https://github.com/nuxt/nuxt.js/issues/1594