<template>
  <PageLayout badge="SPA" badge-color="#f59e0b" title="Single Page Application">
    <InfoRow label="렌더링 위치" value="브라우저 (클라이언트)" />
    <InfoRow
      label="클라이언트 시간"
      :value="data?.time ?? (pending ? '클라이언트에서 로딩 중...' : '-')"
      highlight
    />
    <InfoRow label="메시지" :value="data?.message ?? ''" />
    <InfoRow label="서버 HTML 확인" value="페이지 소스 보기 → 데이터가 비어있음" />

    <template #explain>
      <li><code>defineRouteRules({ ssr: false })</code>로 서버 렌더링을 비활성화합니다.</li>
      <li>서버는 <strong>빈 HTML 껍데기</strong>만 전달하고, 데이터는 브라우저에서 가져옵니다.</li>
      <li>페이지 소스(Ctrl+U)를 보면 데이터가 없습니다.</li>
      <li>인증 이후 대시보드, 관리자 페이지처럼 SEO가 불필요한 곳에 적합합니다.</li>
    </template>

    <template #code>
      <pre>{{ codeExample }}</pre>
    </template>
  </PageLayout>
</template>

<script setup lang="ts">
// nuxt.config.ts에서 설정됨: routeRules: { '/spa': { ssr: false } }
// useFetch는 클라이언트에서만 실행됨
const { data, pending } = await useFetch('/api/time')

const codeExample = `// nuxt.config.ts
export default defineNuxtConfig({
  routeRules: {
    '/spa': { ssr: false },
  },
})

// useFetch → 서버에서 실행되지 않음
// 브라우저 로드 후 클라이언트에서 /api/time 호출`
</script>
