<ClientOnly>
<ClientOnly> 컴포넌트를 사용하여 클라이언트 측에서만 컴포넌트를 렌더링합니다.
<ClientOnly> 컴포넌트는 의도적으로 클라이언트 측에서만 컴포넌트를 렌더링하는 데 사용됩니다.
기본 슬롯의 내용은 서버 빌드에서 트리 쉐이킹됩니다. (이는 초기 HTML을 렌더링할 때 해당 컴포넌트에서 사용된 CSS가 인라인되지 않을 수 있음을 의미합니다.)
Props
placeholderTag|fallbackTag: 서버 측에서 렌더링할 태그를 지정합니다.placeholder|fallback: 서버 측에서 렌더링할 콘텐츠를 지정합니다.
<template>
<div>
<Sidebar />
<!-- <Comment> 컴포넌트는 클라이언트 측에서만 렌더링됩니다 -->
<ClientOnly fallback-tag="span" fallback="Loading comments...">
<Comment />
</ClientOnly>
</div>
</template>
Slots
#fallback: 서버에서 렌더링되고<ClientOnly>가 브라우저에 마운트될 때까지 표시될 콘텐츠를 지정합니다.
pages/example.vue
<template>
<div>
<Sidebar />
<!-- 서버 측에서 "span" 요소를 렌더링합니다 -->
<ClientOnly fallbackTag="span">
<!-- 이 컴포넌트는 클라이언트 측에서만 렌더링됩니다 -->
<Comments />
<template #fallback>
<!-- 서버 측에서 렌더링됩니다 -->
<p>Loading comments...</p>
</template>
</ClientOnly>
</div>
</template>
Examples
HTML 요소 접근하기
<ClientOnly> 내부의 컴포넌트는 마운트된 후에만 렌더링됩니다. DOM에서 렌더링된 요소에 접근하려면 템플릿 ref를 감시할 수 있습니다:
pages/example.vue
<script setup lang="ts">
const nuxtWelcomeRef = useTemplateRef('nuxtWelcomeRef')
// 컴포넌트가 사용 가능할 때 watch가 트리거됩니다
watch(nuxtWelcomeRef, () => {
console.log('<NuxtWelcome /> mounted')
}, { once: true })
</script>
<template>
<ClientOnly>
<NuxtWelcome ref="nuxtWelcomeRef" />
</ClientOnly>
</template>
※이 페이지는 Nuxt.js 공식 문서의 비공식 번역 페이지입니다.
공식 문서의 해당 페이지는 여기 있습니다:
https://nuxt.com/docs/3.x/api/components/client-only