<ClientOnly>

<ClientOnly> 컴포넌트로 클라이언트 사이드에서만 컴포넌트를 렌더링합니다.

<ClientOnly> 컴포넌트는 일부러 컴포넌트를 클라이언트 사이드에서만 렌더링하기 위해 사용됩니다.

기본 슬롯의 내용은 서버 빌드에서 트리 셰이킹되어 제거됩니다. (즉, 그 안에 있는 컴포넌트에서 사용하는 CSS가 초기 HTML 렌더링 시 인라인되지 않을 수 있습니다.)

Props

placeholderTag | fallbackTag: 서버 사이드에서 렌더링할 태그를 지정합니다.
placeholder | fallback: 서버 사이드에서 렌더링할 내용을 지정합니다.

<template>
  <div>
    <Sidebar />
    <!-- <Comment> 컴포넌트는 클라이언트 사이드에서만 렌더링됩니다 -->
    <ClientOnly fallback-tag="span" fallback="댓글을 불러오는 중...">
      <Comment />
    </ClientOnly>
  </div>
</template>

Slots

#fallback: 서버에서 렌더링되고 <ClientOnly>가 브라우저에 마운트될 때까지 표시될 내용을 지정합니다.

pages/example.vue

<template>
  <div>
    <Sidebar />
    <!-- 서버 사이드에서 "span" 요소를 렌더링합니다 -->
    <ClientOnly fallbackTag="span">
      <!-- 이 컴포넌트는 클라이언트 사이드에서만 렌더링됩니다 -->
      <Comments />
      <template #fallback>
        <!-- 이 내용은 서버 사이드에서 렌더링됩니다 -->
        <p>댓글을 불러오는 중...</p>
      </template>
    </ClientOnly>
  </div>
</template>

예시

HTML 요소 접근하기

<ClientOnly> 내부의 컴포넌트는 마운트된 후에만 렌더링됩니다. 렌더링된 요소에 접근하려면 템플릿 ref를 감시할 수 있습니다:

pages/example.vue

<script setup lang="ts">
const nuxtWelcomeRef = useTemplateRef('nuxtWelcomeRef')

// 컴포넌트가 사용 가능해지면 watch가 트리거됩니다
watch(nuxtWelcomeRef, () => {
 console.log('<NuxtWelcome /> 마운트됨')
}, { once: true })
</script>

<template>
  <ClientOnly>
    <NuxtWelcome ref="nuxtWelcomeRef" />
  </ClientOnly>
</template>