정적으로 만들고 싶은 페이지 하나 때문에 앱 전체를 SSG로 바꿀 뻔한 이야기

문제 발생

한 앱 안에 성격이 다른 화면이 섞여 있었습니다.

• 마케팅 페이지: 거의 안 바뀜, 검색 유입이 중요
• 블로그 목록: 하루 몇 번 갱신
• 관리자 대시보드: 로그인 필요, 검색 노출 불필요

nuxt.config.ts의 ssr 값은 하나뿐이라, 처음에는 앱을 둘로 쪼개는 것까지 검토했습니다.

원인 분석

전역 설정만 있는 게 아니었습니다. Nuxt 문서는 이 상황을 하이브리드 렌더링으로 설명합니다 — 하이브리드 렌더링은 Route Rules를 사용해 라우트마다 다른 캐싱 규칙을 적용하고, 주어진 URL의 새 요청에 서버가 어떻게 응답할지를 결정합니다.

문서가 나열하는 규칙은 이렇습니다.

• prerender: boolean — 빌드 시점에 라우트를 미리 렌더해 정적 자산으로 포함
• ssr: boolean — 특정 영역의 HTML 서버 렌더링을 끄고 브라우저에서만 렌더
• isr / swr — 서버 응답에 캐시 헤더를 붙이고 TTL을 지정(isr은 지원 플랫폼에서 CDN 캐시에 적재)
• redirect: string — 서버 사이드 리다이렉트
• headers: object — 사이트 일부에 특정 헤더 추가

문서의 요약은 한 문장입니다 — route rules로 여러 라우트에 대한 규칙을 정의하고, 렌더링 모드를 바꾸거나 경로 기준으로 캐시 전략을 배정할 수 있습니다.

해결 방안

1. 경로별로 필요한 것만 지정합니다.

export default defineNuxtConfig({
  routeRules: {
    "/": { prerender: true },
    "/blog/**": { swr: 3600 },
    "/admin/**": { ssr: false },
    "/old-path": { redirect: "/new-path" },
  },
});

2. ssr: false의 대가를 인지합니다. 그 경로는 초기 HTML에 콘텐츠가 없습니다. 로그인 뒤 화면이면 문제가 없지만, 검색 유입이 필요한 페이지에는 쓰지 않습니다.

3. prerender는 빌드 시점 데이터로 굳는다는 뜻입니다. 자주 바뀌는 목록에 걸면 오래된 화면이 배포될 때까지 남습니다. 그 중간이 swr/isr입니다.

4. 배포 플랫폼을 확인합니다. 문서가 명시합니다 — 가능한 경우 route rules는 최적의 성능을 위해 배포 플랫폼의 네이티브 규칙으로 자동 적용되며, 현재 Netlify와 Vercel이 지원됩니다. 자체 Node 서버에 올린다면 isr의 CDN 이점은 기대하지 않고 애플리케이션 캐시로 이해합니다.

5. 규칙은 좁게 시작합니다. /**에 캐시를 걸어놓고 로그인 사용자 화면이 다른 사람에게 그대로 서빙되는 사고가 이 기능에서 가장 흔합니다. 인증이 필요한 경로에는 캐시 규칙을 두지 않습니다.

공식 문서

• Nuxt: Rendering modes — Hybrid rendering
• Nuxt: routeRules