63 lines
2.9 KiB
Vue
63 lines
2.9 KiB
Vue
<template>
|
|
<PageLayout badge="SSG" badge-color="#10b981" title="Static Site Generation">
|
|
<InfoRow label="렌더링 위치" value="빌드 시 서버 (nuxt generate 1회)" />
|
|
<InfoRow label="빌드 시 생성된 시간" :value="data?.time ?? '로딩 중...'" highlight />
|
|
<InfoRow label="메시지" :value="data?.message ?? ''" />
|
|
<InfoRow label="클라이언트 API 요청" value="없음 — payload에서 hydration" />
|
|
|
|
<template #explain>
|
|
<li>
|
|
<strong>nuxt.config</strong>의 <code>routeRules: { '/ssg': { prerender: true } }</code>로 설정합니다.
|
|
</li>
|
|
<li>
|
|
<code>nuxt generate</code> 실행 시 <code>/api/build-time</code>을 <strong>딱 1회 호출</strong>하고,
|
|
응답값을 HTML 안의 Nuxt payload에 직렬화합니다.
|
|
<br />
|
|
<code style="font-size: 12px; color: #374151;"><script>window.__NUXT__ = { data: { time: "2026-..." } }</script></code>
|
|
</li>
|
|
<li>
|
|
사용자가 페이지를 방문하면 이미 완성된 HTML이 반환됩니다.
|
|
클라이언트의 JS는 payload를 읽어 hydration하므로 <strong>추가 네트워크 요청이 발생하지 않습니다.</strong>
|
|
</li>
|
|
<li>새로고침해도 시간이 고정됩니다 — CDN에서 동일한 정적 파일을 제공하기 때문입니다.</li>
|
|
<li>
|
|
<strong>⚠ SSG의 한계:</strong> 콘텐츠가 바뀌면 <code>nuxt generate</code> 재실행 + 재배포가 필요합니다.
|
|
자주 바뀌는 데이터라면 재배포 없이 자동 재생성하는 <strong>ISR(<code>isr: N</code>)</strong> 또는
|
|
<strong>SWR(<code>swr: true</code>)</strong>을 고려하세요.
|
|
</li>
|
|
<li>
|
|
<strong>확인 방법:</strong> <code>npm run generate</code> 후
|
|
<code>.output/public/ssg/index.html</code>을 열어 <code>__NUXT__</code>를 검색하면
|
|
빌드 시 생성된 시간값이 HTML에 포함된 것을 볼 수 있습니다.
|
|
</li>
|
|
</template>
|
|
|
|
<template #code>
|
|
<pre>{{ codeExample }}</pre>
|
|
</template>
|
|
</PageLayout>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
// nuxt.config.ts에서 설정됨: routeRules: { '/ssg': { prerender: true } }
|
|
// nuxt generate 시 /api/build-time을 1회 호출 → HTML payload에 포함
|
|
const { data } = await useFetch('/api/build-time')
|
|
|
|
const codeExample = `// nuxt.config.ts
|
|
export default defineNuxtConfig({
|
|
routeRules: { '/ssg': { prerender: true } },
|
|
})
|
|
|
|
// nuxt generate 실행 흐름:
|
|
// 1. Nitro 서버 기동
|
|
// 2. /ssg 페이지 pre-render
|
|
// 3. useFetch('/api/build-time') → 1회 호출
|
|
// 4. 응답값을 HTML payload에 직렬화
|
|
// <script>window.__NUXT__ = { data: { time: "..." } }<\/script>
|
|
// 5. .output/public/ssg/index.html 파일 저장
|
|
|
|
// 사용자 방문 시:
|
|
// → 정적 HTML 즉시 반환 (서버 렌더링 없음)
|
|
// → JS가 payload 읽어 hydration (API 요청 없음)`
|
|
</script>
|