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

NuxtJS 렌더링 오류

NuxtJS 개발 환경에서 작업을 하다가 렌더링 오류가 발생하였다.

어찌 보면 해당 오류는 아주 흔하게 볼 수 있는 오류가 아닐까 생각된다.

 

에러 내용을 자세히 살펴보자.

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.

오류 내용은 매우 심플하다 "클라이언트 사이드에서 렌더링 된 가상 DOM 트리가 서버 사이드 렌더링과 다르다"라고 한다.

해당 오류의 원인을 명시해주고 있지만 그래도 왜 다른지 알 수 없는 경우가 대부분이다.

 

아무래도 가장 좋은 방법은 원인을 제거해 주는 것인데,

나 같은 경우에는 v-if에 사용되는 조건 중 하나가 원인이었으니 도대체 왜 그게 원인이 되는지는 알 수 없었다.

 

그래서 원인을 제거할 수 없다면 오류가 발생하지 않도록 조치를 취할수는 있다.

1. 클라이언트 렌더링 고정

이 방법이 가장 흔하게 사용되는 방법이다.

<client-only>
  <div>
  	...
  </div>
</client-only>

client-only 를 사용하여 해당 영역을 클라이언트 렌더링에서만 동작하도록 강제해 주는 방법이 있다.

단지 문제가 있다면 ssr의 효과를 기대할 수 없다는 점이다.

ssr을 사용하는 이유 중 하나가 검색 엔진 때문인데, 거기에 영향을 줄 수 있다는 점이다.

2. v-if 대신 v-show 사용

이 방법 역시 매우 간단한데,

일반적으로 본문에서 설명하는 에러가 발생하는 부분은 v-if를 사용하는 부분에서 발생하기 마련이다.

그래서 단순하게 렌더링 문제라면 v-show를 사용해서 문제를 해결하는 것이다.

다만 v-if와 v-show의 차이점을 알고 있다면 써도 되는지 안되는지 알아서 판단하고 쓰길 바란다.

---

참고: https://stackoverflow.com/questions/47862591/vuejs-error-the-client-side-rendered-virtual-dom-tree-is-not-matching-server-re

Vuejs Error: The client-side rendered virtual DOM tree is not matching server-rendered

참고: https://github.com/nuxt/nuxt/issues/1567

[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrec