RouteRules를 이용한 하이브리드 렌더링(Hybrid Rendering) 전략
Nuxt는 단순한 SSR 프레임워크가 아닙니다. 하이브리드 렌더링(Hybrid Rendering)을 통해 nuxt.config.ts의 routeRules 옵션 하나만으로 경로(URL)마다 완전히 다른 렌더링 엔진을 가동할 수 있습니다.
실시간으로 변하는 메인 화면은 SSR로, SEO가 중요하지 않고 반응성이 생명인 어드민 패널은 SPA 모드로, 한번 작성되면 잘 바뀌지 않는 블로그 포스트는 빌드 시 정적 생성(Prerender)으로, 성능을 극대화하고 서버 비용을 절약하세요.
<!-- ==========================================
// 📂 nuxt.config.ts
// Nuxt 설정 파일에서 routeRules 객체를 선언합니다.
// ========================================== -->
<script>
export default defineNuxtConfig({
routeRules: {
// 1. 관리자 대시보드: SEO가 필요 없으므로 클라이언트에서만 렌더링 (SPA 모드)
// 빠른 화면 전환과 서버 부하 감소를 노립니다.
'/admin/**': { ssr: false },
// 2. 블로그 게시물: 빌드 시점에 미리 HTML로 찍어냅니다. (SSG/Prerender 모드)
// 블로그 포스트는 자주 바뀌지 않으므로 초고속 정적 파일 제공이 유리합니다.
'/blog/**': { prerender: true },
// 3. 상품 상세 페이지: ISR (SWR - Stale-While-Revalidate) 모드
// 최초 요청 시 캐시하고, 이후 60초(3600초 등) 동안 캐시된 결과를 즉시 반환합니다.
'/products/**': { swr: 60 },
// 4. API 라우트: 다른 도메인에서도 이 API를 호출할 수 있도록 CORS 헤더를 추가합니다.
'/api/v1/**': { cors: true },
// 5. 이전 URL 리다이렉션: 구 주소로 접근하면 새 주소로 자동 연결
'/old-page': { redirect: '/new-page' }
}
})
</script>