Nuxt 공식문서 번역/Components
<ClientOnly>
Tech정개블
2023. 12. 11. 17:12
<ClientOnly> 컴포넌트는 클라이언트 측에서만 슬롯을 렌더링한다. 클라이언트에서만 컴포넌트를 가져오려면 클라이언트 측 전용 플러그인에 컴포넌트를 등록한다.
Props
- placeholderTag | fallbackTag : 서버사이드에서 렌더링될 태그를 특정한다.
- placeholder | fallback :서버사이드에서 렌더링될 컨텐츠를 특정한다.
<template>
<div>
<Sidebar />
<ClientOnly fallback-tag="span" fallback="Loading comments...">
<Comment />
</ClientOnly>
</div>
</template>
Slots
- #falllback : 서버사이드에서 출력될 컨텐츠를 특정한다.
<template>
<div>
<Sidebar />
<ClientOnly>
<!-- ... -->
<template #fallback>
<!-- this will be rendered on server side -->
<p>Loading comments...</p>
</template>
</ClientOnly>
</div>
</template>