스태틱에서 스마트로: Nuxt 3로 동적 사이트맵 생성

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

• Nuxt 3 프로젝트 개발자, 특히 대규모/전자상거래 사이트 개발자
• 중급 이상의 Vue.js 및 서버 라우팅 경험자

핵심 요약

• Nuxt 3에서 동적 사이트맵 생성은 server/routes/sitemap.xml.js 라우트를 통해 실시간 데이터 반영
• Supabase 데이터베이스 연동으로 제품 정보 자동 수집 및 URL 생성
• XML 응답 헤더 설정(Content-Type: application/xml) 필수
• slug와 updated_at 필드를 사용한 URL/마지막 업데이트 날짜 동적 생성

섹션별 세부 요약

1. 사이트맵의 필요성

• 새 사이트, 대규모 사이트, 링크가 복잡한 사이트에 추천
• 검색 엔진에 콘텐츠 변경 주기 및 우선순위 정보 제공
• 하지만 검색 엔진 인덱싱 보장은 불가능

2. 정적 사이트맵의 한계

• 홈, About, Contact 등 정적 페이지에 적합
• 전자상거래 사이트의 경우 수동 업데이트 필요로 시간 소요
• 상품 페이지 수가 빈번히 변경될 경우 유지보수가 어려움

3. Nuxt 3 동적 사이트맵 구현

• server/routes/sitemap.xml.js 파일 생성 및 defineEventHandler 사용
• Supabase 데이터베이스에서 slug 및 updated_at 필드 추출
• getLastmodValue 함수로 날짜 형식 변환
• Content-Type 헤더 설정으로 XML 인식 강제

4. 예제 코드 구조

• getBooks 함수: Supabase 연동 및 필수 필드(slug, updated_at) 선택적 조회
• sitemap.xml.js에서 books.map()을 통해 URL 생성
• 태그 내 요소 동적 삽입

결론

• Nuxt 3 프로젝트에서 Supabase와 연동한 동적 사이트맵은 검색 엔진 최적화에 효과적
• slug와 updated_at 필드 활용, Content-Type 헤더 설정 필수
• 대규모/전자상거래 사이트 개발자에게 실무 적용 가능한 패턴 제공