<template>
  <div>
    <Sidebar />
    <!-- これはサーバーサイドで "span" 要素をレンダリングします -->
    <ClientOnly fallbackTag="span">
      <!-- このコンポーネントはクライアントサイドでのみレンダリングされます -->
      <Comments />
      <template #fallback>
        <!-- これはサーバーサイドでレンダリングされます -->
        <p>コメントを読み込んでいます...</p>
      </template>
    </ClientOnly>
  </div>
</template>

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

// コンポーネントが利用可能になったときにウォッチがトリガーされます
watch(nuxtWelcomeRef, () => {
 console.log('<NuxtWelcome /> がマウントされました')
}, { once: true })
</script>

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