서버측 렌더링 전용 `<server-only>` 태그

Question

클라이언트 측에서만 렌더링해야 하는 코드가 있으므로 태그로 래핑합니다.

그러나 콘텐츠가 튀는 것을 방지하기 위해 다음 코드를 사용하여 서버측에서만 요소를 렌더링해 보았습니다.

<div v-if="$isServer" class="h-nonav bg-gray-500"

이 방법은 작동하지만 Vue는 서버 측 HTML이 클라이언트 측과 일치하지 않는다고 불평합니다.

이 방법은 작동하지만 약간 이상하게 들리며 페이지가 두 번 렌더링됩니다.

<div v-if="ssr" class="h-nonav bg-gray-500"
...
데이터() {
  반품 {
    ssr: 사실
  }
},
탑재() {
  this.ssr = 거짓
},

문서 검색을 시도했지만 태그를 찾을 수 없습니다.(

Answer 1

상관없습니다. v-show代替v-if:

를 사용하여 문제를 해결하세요. 으아악

이것이 다시 도움이 되기를 바랍니다...