31 lines
1.2 KiB
Vue
31 lines
1.2 KiB
Vue
<template>
|
|
<PageLayout badge="SSR" badge-color="#3b82f6" title="Server-Side Rendering">
|
|
<InfoRow label="렌더링 위치" value="서버 (요청마다)" />
|
|
<InfoRow label="서버 시간" :value="data?.time ?? '로딩 중...'" highlight />
|
|
<InfoRow label="메시지" :value="data?.message ?? ''" />
|
|
|
|
<template #explain>
|
|
<li>페이지 요청 시 서버에서 <code>/api/time</code>을 호출하고 HTML을 완성해 전달합니다.</li>
|
|
<li><strong>새로고침할 때마다 시간이 바뀝니다.</strong> — 서버가 매번 렌더링하기 때문입니다.</li>
|
|
<li>SEO에 유리하고, 항상 최신 데이터를 보여줍니다.</li>
|
|
<li>별도 설정 없이 Nuxt의 기본 동작입니다.</li>
|
|
</template>
|
|
|
|
<template #code>
|
|
<pre>{{ codeExample }}</pre>
|
|
</template>
|
|
</PageLayout>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
// SSR은 Nuxt 기본값 — 별도 설정 불필요
|
|
const { data } = await useFetch('/api/time')
|
|
|
|
const codeExample = `// nuxt.config.ts — 기본값이므로 별도 설정 없음
|
|
export default defineNuxtConfig({})
|
|
|
|
// pages/ssr.vue
|
|
const { data } = await useFetch('/api/time')
|
|
// 요청마다 서버에서 /api/time을 호출 → 항상 최신 데이터`
|
|
</script>
|