40 lines
1.5 KiB
Vue
40 lines
1.5 KiB
Vue
<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>
|