SSR할 수 없는 브라우저 전용 UI에 명시적 경계를 둡니다.
ClientOnly은 자식을 서버 build에서 제외하고 브라우저에서만 렌더합니다. SEO와 초기 화면에 필요한 콘텐츠에는 사용하지 않습니다.
fallback으로 크기와 의미가 비슷한 서버 UI를 제공해 레이아웃 이동을 줄입니다.
가능하면 컴포넌트 전체보다 실제 브라우저 의존 부분만 작게 감쌉니다.
SSR 오류를 숨기기 위해 페이지 전체를 ClientOnly으로 만들면 Nuxt의 서버 렌더 장점을 잃습니다.
로컬 프로젝트에서 확인해보세요브라우저 timezone을 mounted 후 표시하세요.
<script setup>
const width = ref(0);
onMounted(() => (width.value = window.innerWidth));
</script>
<template>
<main>
<h1>브라우저 정보</h1>
<ClientOnly fallback-tag="p" fallback="브라우저 준비 중..."
><p>viewport {{ width }}px</p></ClientOnly
>
</main>
</template>